javascript - 使用输入数字更新显示的段落数 - 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 字符串。它不会被返回或分配给任何东西，因此不会发生任何事情。

您还拼错了 id您的input :

document.getElementById("numerInput")

此外，请勿将内联 HTML 事件属性(即 onclick )用作 there are many reasons 不要使用这种 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>