时间戳

首页 > 解决方案 > 用 JS 迭代 DOM 属性 x 次

javascript - 用 JS 迭代 DOM 属性 x 次

问题描述

我基本上有一个类型号的输入

<input type="number" id="no_pi" name="" onkeyup="des()">
<div id="extract"></div>

和功能

function des() {
    var ext = document.getElementById('extract');
    var va = Number(document.getElementById('no_pi').value);
    for (var i = 0; i = va; i++) {
        ext.innerHTML = "<input type='number' name='' class='form-control'><div class='input-group-text'>cm</div>";
}
}

我只想根据用户输入立即生成x个输入。div当用户输入任何数字时，页面就会崩溃。我认为页面正在无限循环，但我认为事实并非如此。

任何想法如何实现这一目标

标签： javascripthtml

解决方案

你的关键问题是你如何使用你的循环。i = va不会完成你想要的。应该检查迭代中的索引是否小于输入中的值所代表的数字。应该是i < va。

另一个问题是您没有添加到 HTML，只是确保 HTML 只是一个输入。

我已经调整了您问题中的代码以删除内联 JS 并addEventListener改为使用，并且还使用数组来存储从循环构建的 HTML，然后可以将其应用于提取元素。

// Cache the elements outside of the loop
// and attach a change listener to the noPi element
const extract = document.getElementById('extract');
const noPi = document.getElementById('no_pi');
noPi.addEventListener('change', des, false);

function des() {

  const limit = noPi.value;

  // Check that we haven't gone into
  // negative numbers
  if (limit >= 0) {

    // Create an array
    const html = [];

    // Loop, pushing HTML into the array, until 
    // we've reached the limit set by the value in noPi 
    for (let i = 0; i < limit; i++) {
      html.push('<input type="number" class="form-control"><div class="input-group-text">cm</div>');
    }

    // `join` up the array, and add the HTML
    // string to the extract element
    extract.innerHTML = html.join('');

  }

}
<input type="number" id="no_pi" />
<div id="extract"></div>

附加信息

推荐阅读