whileループを使用して配列から選択結果を出力する

Question

私は毎週少しずつ作成したウェブサイト上にこの割り当てを行います。今週私はいくつかのjavascriptコードを書く必要があります。そのコードは、配列内から要求された数の結果を表示することです。要求された番号は、フォームテキスト入力で入力されます。手順は次のとおりです。

a。ユーザーに を表示して欲しい職務の数を入力するように促す文のために、空白の塗りつぶしとして機能する入力を作成します。

b。クリックしたときに関数を呼び出すボタンを作成する（次のステップで作成される関数）

c。ユーザー入力を受け取り、その値を変数に代入する関数を作成します。

d。少なくとも5つの職務を持つ配列を作成します。

e。新しい変数を作成し、入力された値から1を差し引いた値に設定します。

f。変数（印刷するインデックス値を表す）が最小配列値以上である間に実行されるwhileループを作成します。

g。 whileループ内では、次の2つのことが起こります。ページ内の要素のinnerHTMLを、印刷したいインデックス番号に対応する配列値に置き換えます。 arrayname [indexnumber]という形式で配列の値を指定します。また、インデックスを減算するためにインデックスを減算させる

この時点で、あなたの関数は動作するはずですが、正しく動作しません。最後のインデックスの配列値のみが出力されます。これを修正するには、ループの結果を連結する必要があります。

i。ループの外で新しい変数を作成し、空白の

1. に等しくなるように設定しますが

II「」に等しい、それを設定することによってこれを行います。ループの中で、この変数に、それ自身に印刷したい配列の値を加えたものと等しくなるようにします。

iii。 innerHTMLをこの変数と同じに変更します。その動作していない

私は今のところまだ、これを持っている：

function showDuties() { 
 
    var numDuties = document.getElementById('pfJobs').value; 
 

 
    var pfDuties = ["Auditing", "Close out registers", "Clean free weights", 
 
    "Sign up new members", "File paperwork" 
 
    ] 
 

 
    var i = numDuties - 1 
 

 
    while (i >= 0) { 
 
    document.getElementById('pfj').innerHTML = pfDuties[0, 1, 2, 3, 4]; 
 
    i--; 
 
    }

<form> 
 
    <input type="submit" value="Click here" onclick="showDuties()"> 
 
    to see my top 
 
\t <input type="text" id="pfJobs" /> 
 
\t job duties here. 
 
\t <p id = "pfj"> 
 
\t </p> 
 
</form>

これは、アレイ内からの要素と私のHTMLに段落タグ内のテキストを置き換えてやって終わります画面上で半秒間点滅するだけで消えます。

私の書式が間違っている場合は、このサイトを初めて使用していることをお詫びします。 ご協力いただければ幸いです。

Answer 1

あなたはここでそれをやってますが依存する一つの方法だ単一の文字列

document.querySelector('button').addEventListener('click', showDuties); 
 

 
function showDuties() { 
 
    var numDuties = document.getElementById('pfJobs').value; 
 

 
    var pfDuties = ["Auditing", "Close out registers", "Clean free weights", "Sign up new members", "File paperwork"] 
 

 
    document.getElementById('pfj').innerHTML = pfDuties.slice(0,numDuties).join(", "); 
 
}

<input type="number" id="pfJobs" value="0" max="5"> 
 
<button>show jobs</button> 
 

 
<p id="pfj"></p>

Answer 2

にこれらの配列の値を結合するために、あなたの配列の一部とjoinのコピーを取得するためにsliceを使用することができますあなたが他のアプローチをしようとしているところでもっと良いかもしれません。重要なのは、DOMが動的であることを覚えておいて、そこからノードを追加したり減算したりすることができます。

function showDuties() { 
 
    document.getElementById('pj').innerHTML=''; 
 
    var numDuties = document.getElementById('pfJobs').value; 
 
    
 
    var pfDuties = ["Auditing", "Close out registers", "Clean free weights", 
 
    "Sign up new members", "File paperwork"] 
 
    
 
    // Create the list element: 
 
    var list = document.createElement('ul'); 
 

 
    for(var i = 0; i < numDuties; i++) { 
 
     // Create the list item: 
 
     var item = document.createElement('li'); 
 

 
     // Set its contents: 
 
     item.appendChild(document.createTextNode(pfDuties[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(item); 
 
    } 
 

 
    // Finally, return the constructed list: 
 
    
 

 
// Add the contents 
 
document.getElementById('pj').appendChild(list); 
 
}

<!-- Add HTML Here --> 
 
<div id='pj'></div> 
 
<input id='pfJobs' onchange='showDuties()' />

Answer 3

あなたは追加手間をかけずに提出するフォームを模倣クリックハンドラを追加することができます。入力から値を取得するdocument.getElementById

sliceまたはES6 spreadを2つの方法で元の配列に変更しないので、配列上に値をキャプチャします。

また、インデックスが決してあなたの配列の長さより長くならないというチェックを追加しました。

document.getElementById('submit').addEventListener('click', myFunction); 
 

 
function myFunction() { 
 
let pfDuties = ["Auditing", "Close out registers", "Clean free weights", 
 
    "Sign up new members", "File paperwork" 
 
    ]; 
 
    let index = document.getElementById('input').value; 
 
    if (index > pfDuties.length) { 
 
    document.getElementById('pfj').innerText = 'Value is greater than the number of duties'; 
 
    return; 
 
    } 
 
    // slice 
 
    let result = pfDuties.slice(0, index).concat(pfDuties.slice(index + 1)); 
 
    // spread 
 
    let result2 = [...pfDuties.slice(0, index), ...pfDuties.slice(index + 1)]; 
 
    // you can return either array here just did both to show example 
 
    document.getElementById('pfj').innerHTML = result.join('<br>'); 
 
}

Value<br> 
 
<input type="text" id="input"> 
 
<br><br> 
 
<button id="submit">Submit</button> 
 
<p id="pfj"></p>