使用輸入數字更新顯示的段落數-HTML Javascript

Question

我正在嘗試使用輸入數字類型來更新將特定數量的內容添加到頁面的次數。 在示例中，我使用了p標簽，但是在我的主模型中，我在更大的范圍內使用了多個div。 但是，我似乎無法使它正常工作。 如果有人可以看到我要去哪里錯了，那將非常有幫助。

 function updatePage() { var i = document.getElementById("numerInput").value; document.getElementById("content").innerHTML = while (i > 1) { "<p>Content<p/><br>"; i--; }; } 

 <input type="number" value="1" id="numberInput"> <br> <input type="button" value="Update" onclick="updatePage()"> <div id="content"> <p>Content <p> <br> </div> 

Answer 1

首先，您有很多問題需要解決：

您正在將.innerHTML設置為while循環，這是無效的，因為循環沒有返回值。 而且，在循環中，您只有一串HTML。 它不會被返回或分配給任何東西，因此不會發生任何事情。

您還誤拼了input的id ：

document.getElementById("numerInput")

另外，不要使用內聯HTML事件屬性（即onclick ），因為有很多原因不使用這種已經存在20多年的陳舊技術，而且這種技術不會消失。 將所有JavaScript工作與HTML分開。

最后，您的HTML無效：

"<p>Content<p/><br>"

應該：

"<p>Content</p>"

請注意，除了修復結束符p的語法外， <br>也已被刪除。 不要僅僅使用<br>在文檔中添加空格-使用CSS即可。 <br>僅應將換行符插入某些內容，因為該內容應被分解，而不是新的部分。

---

現在，要解決您的總體問題，您應該做的是將.innerHTML設置為函數的返回值，或更簡單地，將其設置為循環創建的最終結果，如下所示。

 // Get DOM references just once in JavaScript let input = document.getElementById("numberInput"); let btn = document.querySelector("input[type='button']"); // Set up event handlers in JavaScript, not HTML with standards-based code: btn.addEventListener("click", updatePage); function updatePage() { var output = ""; // Will hold result // Instead of a while loop, just a for loop that counts to the value entered into the input for (var i = 0; i < input.value; i++) { // Don't modify the DOM more than necessary (especially in a loop) for performance reasons // Just build up a string with the desired output output += "<p>Content</p>"; // Concatenate more data }; // After the string has been built, update the DOM document.getElementById("content").innerHTML = output; } 

 <input type="number" value="1" id="numberInput"> <br> <input type="button" value="Update"> <div id="content"> <p>Content</p> </div> 

而且，如果您確實確實希望相同的字符串重復輸入到input ，那么使用string.repeat()可能會更簡單。

 // Get DOM references just once in JavaScript let input = document.getElementById("numberInput"); let btn = document.querySelector("input[type='button']"); // Set up event handlers in JavaScript, not HTML with standards-based code: btn.addEventListener("click", updatePage); function updatePage() { // Just use string.repeat() document.getElementById("content").innerHTML = "<p>Content</p>".repeat(input.value); } 

 <input type="number" value="1" id="numberInput"> <br> <input type="button" value="Update"> <div id="content"> <p>Content</p> </div> 

Answer 2

正如@ScottMarcus指出的那樣，您遇到以下問題：

1. While Loops不需要; 在while(args) {}末尾
2. 您的.innerHTML代碼在錯誤的位置
3. 您在getElementById("numerInput")中輸入錯誤，將其更改為getElementById("numberInput")

碼

---

  function updatePage() { // Get input value var numberInput = document.getElementById("numberInput").value; // Will be used to store all <p> contents var template = ""; while (numberInput > 0) { // Add all contents into template template += "<p>Content<p/><br>"; numberInput--; } // Append upon clicking document.getElementById("content").innerHTML = template; } 

 <input type="number" value="1" id="numberInput"> <br> <input type="button" value="Update" onclick="updatePage()"> <div id="content"> </div>