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的{{1}}：

input

此外，不要将内联HTML事件属性（即document.getElementById("numerInput")）用作 there are many reasons ，不要使用这种不会死的20岁以上的过时技术。将您的所有JavaScript工作与HTML分开。

最后，您的HTML无效：

onclick

应该是：

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

请注意，除了修复结束"<p>Content</p>"的语法之外，p已被删除。不要仅使用<br>为文档添加间距 - 使用CSS执行此操作。 <br>仅应用于在某些内容中插入换行符，因为该内容应该分解，而不是分成新的部分。

现在，为了解决您的整体问题，您应该做的是将<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);
}

Answer 2

正如@ScottMarcus指出你有以下问题：

While Loops ;

while(args) {}

您的.innerHTML代码位置错误
您在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>

使用输入数字更新显示的段落数 - HTML Javascript

2 个答案: