用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輸入。當用戶輸入任何數字時，頁面就會崩潰。我認為頁面是無限回圈的，但我認為事實并非如此。

任何想法如何實作這一目標

uj5u.com熱心網友回復：

您的關鍵問題是您如何使用 loop。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" ><div >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>

附加資訊

• join

uj5u.com熱心網友回復：

我看到您想使用輸入欄位來插入要創建的輸入數量。我看到了一種更好的方法來開始學習插入帶有提示的輸入數量，然后擴展專案。

你可以這樣開始：（希望對你有意義）

<div style="height: 300px; background-color: #ccc;" class="container"></div>

我們有這個 div 將填充輸入

然后我們有腳本：

    const container = document.querySelector('.container');
    const runTimes = prompt("How many inputs wnat to create?");
    
    for(let i = 0; i < runTimes; i  ){
        let newInput = document.createElement('input');
        newInput.innerHTML = "<input type='number' name='' class='form-control'>";
        container.appendChild(newInput);
    }

在 for 回圈中，我們創建元素輸入，然后使用 .innerHTML 添加我們想要的 HTML。要結束回圈，我們需要將創建的輸入元素附加到我們擁有的 div 中。

希望它對你有意義，:)

當您通過提示獲得想法時，我已經完成了這個專案，更加專業。

<div style="height: 300px; background-color: #ccc;" class="container"></div>
<input type="text" class="numberTimes" onkeyup="getValue()">

我們使用函式 getValue 向輸入添加一個事件偵聽器，腳本如下：

const container = document.querySelector('.container');

    function getValue(){
        let runTimes = document.querySelector('.numberTimes').value;
        document.querySelector('.numberTimes').value= "";
        for(let i = 0; i < runTimes; i  ){
            let newInput = document.createElement('input');
            newInput.innerHTML = "<input type='number' name='' class='form-control'>";
            container.appendChild(newInput);
        }
        
    }

此行document.querySelector('.numberTimes').value= "";用于重置輸入欄位。因此，每當在輸入上插入一個值時，它就會在容器中創建該數量的輸入并清理輸入欄位:)

uj5u.com熱心網友回復：

有幾個錯誤：

• 在你的回圈中：（i = va這就是它崩潰的原因）
• ext每次迭代時都會擦除 div 的內容，而不是添加內容
• 通過監聽keyup事件，您可以在每次擊鍵時添加一些內容。最后，如果用戶提交 12，它將生成 1 12 個元素。您應該使用表單傳遞值（通過這樣做，您還可以輕松地在輸入元素中添加值控制元件）。
• 正如@Andy 在評論中完美提到的那樣，這innerHTML =是一個非常糟糕的主意。您應該使用document.createElement或insertAdjacentHTML生成元素。

一些建議：

• 使用事件偵聽器而不是onkeyup屬性
• 避免這種變數名，更明確
• 使用const和let代替var

這是一個解決所有問題的版本：

document.getElementById('elementsNumberForm').addEventListener('submit', event => {
    event.preventDefault();
    const targetElement = document.getElementById('extract');
    const inputValue    = document.getElementById('no_pi').value;
    for (let i = 0; i < inputValue; i  ) {
       targetElement.insertAdjacentHTML('beforeEnd', '<input type="number" name=""  /><div >cm</div>');
    }
});

<form id="elementsNumberForm">
    <input type="number" id="no_pi" min="1" />
    <input type="submit" />
</form>
<div id="extract"></div>

標籤：javascript html

上一篇：將動態Json結構修改為平面鍵和值

下一篇：將回圈內的物件陣列合并到新物件中