代码之家 › 专栏 › 技术社区 › Matt Hutch

使用输入号更新显示的段落数-html javascript

html javascript

Matt Hutch · 技术社区 · 6 年前

我试图使用输入数字类型来更新特定数量的内容添加到页面的次数。在这个例子中,我用一个 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>

2 回复 | 直到 6 年前

Scott Marcus 6 年前

首先,你有很多问题需要解决:

你正在设置 .innerHTML 到A 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 , the <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>

而且,如果您确实希望相同的字符串重复输入 输入 ,那么使用 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);
}

<输入type=“number”value=“1”id=“number input”>
<br>
<input type=“button”value=“update”>
<div id=“content”>
<p>内容<p>
</分区>

Alex 6 年前

正如@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>