2016-10-07 8 views
2

私は基本的にユーザーからの入力を2度受け取るプログラムを開発しています(リスクキャリアと合計ですが、これらの2つの値を一緒にしてから、ループで内容を繰り返します。以下のコードを参照してください。JSとJSのスコープを使ってHTMLページの中に "Writing"を書く

<head> 

<script type="text/javascript"> 
function fillArray(){ 
    document.getElementById("danke").innerHTML = "Thanks for specifying the amount of entries."; 
    var numberOfEntries = parseInt(document.getElementById('input0').value); 
    var i = 0; 
    var myArrA = []; 
    var myArrB = []; 
    var x = " "; 
    while(i<numberOfEntries){ 
     var neuRT = prompt("Enter a risk carrier"); 
     myArrA.push(neuRT); 
     var neuRH = prompt("Enter a risk sum"); 
     myArrB.push(neuRH); 
     i++; 
    } 
    for(i = 0; i<anzahlEintraege; i++){ 
     x = myArrA[i] + " carries a risk of " + myArrB[i]; 
    document.getElementById("test").innerHTML = x; 
    } 

} 


</script> 
</head> 

<body> 

<h1>risk assessment</h1> 

<input type="text" id="input0" /> 
<button type="button" onclick="fillArray()">Number of entries</button> <p id="danke"></p> 

<button type="button" onclick="untilNow()">Show all entries so far</button> 
<br /> 
<br /> 
<div id="test"></div> 

</body> 
</html> 

私の問題は、次のとおりです。

1)私は、forループで試みHTML要素の中に書き込むことによって、配列を表示したいです。ポップアップは避けなければならない。どうすればdemo1、demo2、demo3などのHTML要素をループすることができますか?私は<p id="demo" + i></p>と書くことはできません。他にどんな選択肢がありますか?

2.)私はuntilNow()関数を使いたいとします。私の配列の範囲はfillArray()に限られています。配列をuntilNow()関数にパラメータとして「返す」必要がありますか?

ありがとうございます!

答えて

1

現在のコードの問題は、すべてのループの最後の値でhtmlを置き換えていることです。 +=ではなく=を使用しています。 (があることに注意してください

document.getElementById("test").innerHTML += x; 

あなたはHTMLElementsで文字列の配列をラップし、ドキュメントに追加することができる方法の例:

document.getElementById("test").innerHTML = x; 

をによって:だから、クイックフィックスは置き換えることであろう他の多くの方法/ライブラリは、同じ結果を達成するために):

var myStrings = ["Hello", "stack", "overflow"]; 
 

 
// Two performance rules: 
 
// 1. Use a fragment to prevent multiple updates to the DOM 
 
// 2. No DOM queries in the loop 
 
var newContent = myStrings.reduce(function(result, str) { 
 
    var li = document.createElement("li"); 
 
    var txt = document.createTextNode(str); 
 
    li.appendChild(txt); 
 
    result.appendChild(li); 
 
    
 
    return result; 
 
}, document.createDocumentFragment()); 
 

 

 
// Actually add the new content 
 
document.querySelector("ul").appendChild(newContent);
<ul class="js-list"></ul>

関連する問題