ループ中にJavaScriptを使用して.innerHTMLにテキストを繰り返し出力する

Question

whileループを使用する方法を学習していますが、多かれ少なかれコンセプトがダウンしていますが、whileループを使ってhtml素子。私が理解から

var text = prompt("What would you like logged to screen?"); 
 
//I may need to convert prompt output to a number 
 
var repeatText = prompt("How many times would you like to print the text?"); 
 
var loopCount = 0; 
 

 
while (loopCount < repeatText) { 
 
\t //I want text to print out on screen "x" times, where x is equal to the numerical value of loopCount 
 
    document.getElementById("outputHolder2").innerHTML += text; 
 
    loopcount++; 
 
} 
 

 
//this isn't outputting to outputHolder1 after loop 
 
document.getElementById("outputHolder1").innerHTML = loopCount;

#outputHolder1 { 
 
    margin: 0px; 
 
    padding: 10%; 
 
    background-color: lightBlue; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-weight: 5; 
 
} 
 

 
#outputHolder2 { 
 
    padding: 2% 10% 0% 10%; 
 
}

<div> 
 
    <p id="outputHolder1"> 
 
    NUMBER OF TIMES TO LOOP: 
 
    </p> 
 

 
    <p id="outputHolder2"> 
 

 
    </p> 
 

 
</div>

、.innerHTML += textは HTML要素の内部テキストをコピーして、そこに新しいテキストを追加し、しかし、私はこの作品を作ることができていないはずですループ。

生のJavascriptソリューションのみをお願いします。

loopCount++; 

エルス

それはundefined変数loopcountと見なされます：あなたが初めてvar loopCount = 0;で定義されてきたよう

Answer 1

あなたがそれにアクセスすると、 "loopcountが未定義である" と言います。あなたの変数はloopCountです。 注意：JavaScriptでは大文字と小文字が区別されます。

また、はい、promptのユーザー入力を数字に変換する必要があります。これを行わずに比較を行うことはできますが、後ほどコードで値を使って他の数学を行うことを決めた場合には、ベストプラクティスとして適しています。

var text = prompt("What would you like logged to screen?"); 
 

 
// I may need to convert prompt output to a number 
 
var repeatText = parseInt(prompt("How many times would you like to print the text?"), 10); 
 

 
var loopCount = 0; 
 

 
while (loopCount < repeatText) { 
 
    // I want text to print out on screen "x" times, 
 
    // where x is equal to the numerical value of loopCount 
 
    document.getElementById("outputHolder2").innerHTML += text; 
 
    loopCount++; 
 
} 
 

 
// this isn't outputting to outputHolder1 after loop 
 
document.getElementById("outputHolder1").innerHTML = loopCount;

#outputHolder1 { 
 
    margin: 0px; 
 
    padding: 10%; 
 
    background-color: lightBlue; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-weight: 5; 
 
} 
 

 
#outputHolder2 { 
 
    padding: 2% 10% 0% 10%; 
 
}

<div> 
 
    <p id="outputHolder1"> 
 
    NUMBER OF TIMES TO LOOP: 
 
    </p> 
 

 
    <p id="outputHolder2"> 
 

 
    </p> 
 

 
</div>

Answer 2

loopcount++;はキャメルケースにする必要があります。

これが役に立ちます。エラーメッセージとして

var text = prompt("What would you like logged to screen?"); 
 
var repeatText = prompt("How many times would you like to print the text?"); 
 
var loopCount = 0; 
 

 
while (loopCount < repeatText) { 
 
    document.getElementById("outputHolder2").innerHTML += text; 
 
    loopCount++; 
 
} 
 

 
document.getElementById("outputHolder1").innerHTML = loopCount;

#outputHolder1 { 
 
    margin: 0px; 
 
    padding: 10%; 
 
    background-color: lightBlue; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-weight: 5; 
 
} 
 

 
#outputHolder2 { 
 
    padding: 2% 10% 0% 10%; 
 
}

<div> 
 
    <p id="outputHolder1"> 
 
    NUMBER OF TIMES TO LOOP: 
 
    </p> 
 
    <p id="outputHolder2"></p> 
 
</div>