Question

我正在尝试根据用户数字输入的内容显示多个div。例如，如果用户选择3，则显示3个div。

我设法使其正常工作，但我需要为每个div动态设置返回值的ID，并在单词car旁边设置数字，例如Car 1 Car 2 Car 3。

        <div class="col-md-12">
            <div id="content"></div>
            <script>
                function myFunction(){
                var n = Number(document.getElementById("nbchambre").value);
                var content = document.getElementById('content');
                content.innerHTML="";
                for(var count = 1; count < n+1; count++){
                var div = document.createElement('div');
                div.innerHTML = 'Car : <input type="date" name="bday">';
                content.appendChild(div);
                    }
                }
            </script>
        </div>

如果用户放3个，应该出来汽车1：汽车2：汽车3：

Answer 1

您只需要将count连接到字符串中，并将其分配给id属性和文本。

function myFunction() {
  var n = Number(document.getElementById("nbchambre").value);
  var content = document.getElementById('content');
  content.innerHTML = "";
  
  for (var count = 1; count < n + 1; count++) {
    var div = document.createElement('div');
    div.innerHTML = 'Car ' + count + ': <input type="date" name="bday" id="car' + count + '">';
    content.appendChild(div);
  }
}

myFunction();

<div class="col-md-12">
  <div id="content"></div>
</div>

<input type="text" id="nbchambre" value="5" />

Answer 2

您只需在字符串中附加count即可

function myFunction() {
  var n = Number(document.getElementById("nbchambre").value);
  var content = document.getElementById('content');
  content.innerHTML = "";
  for (var count = 1; count < n + 1; count++) {
    var div = document.createElement('div');
    div.innerHTML = `Car ${count}: <input type="date" name="bday">`;
    content.appendChild(div);
  }
}

document.querySelector('#nbchambre').addEventListener("input", myFunction)

<input id="nbchambre">
<div class="col-md-12">
  <div id="content"></div>
</div>

根据数字输入部署多个div

2 个答案: