Question

我在这里遇到了一个JavaScript问题。我试图让输入数字字段操作创建段落的次数，这是我工作的。我有点卡住的区域是让每个段落都有一个唯一的ID并添加到内容文本编号。

有没有人知道如何解决此问题，因为它创建的每个段落具有相同的ID和相同的内容文本编号？

＆＃13;

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 id="p1">Content - 1<p/><br>';

    numberInput--;
  }
  // Append upon clicking
  document.getElementById("content").innerHTML = template;
}

＆＃13;

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

＆＃13;

Answer 1

你的意思是这样的：
（只需在 id 和模板 中连接 numberInput ）

function updatePage() {
  // Get input value
  var numberInput = document.getElementById("numberInput").value;

  // Will be used to store all <p> contents
  var template = "";
  var idx = 1 
  while (idx <= numberInput ) {
    // Add all contents into template
    template += '<p id="p' +idx + '">Content - ' + idx  + '<p/><br>';
    
    idx++;
  }
  // 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">
  <p id="p1">Content - 1<p/><br />
</div>

Answer 2

Concat输入值，如'<p id="p_'+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 id="p_' + numberInput + '">Content - 1<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">
  <p id="p1">Content - 1
    <p/><br>
</div>

使用输入数字创建具有唯一ID的段落

2 个答案: