如何生成带有 select 选项标签的 div 和点击按钮时的某个按钮？

Question

所以我有这段代码：我希望使用 class 'members' 将生成的 div 附加到 div 我还有两个按钮：一个生成 div 另一个提交.我的控制台没有显示任何错误，但代码无法正常工作，它会冻结我的浏览器任何帮助？？

HTML:

<main>
        <div class="members">

        </div>
        <form>
            <button class="addMember" type="button">Add Member <i class="fas fa-plus-square"></i> </button>
            <button type="submit" class="submit">Submit</button>
        </form>
    </main>

JS:


const generateDOM = function(e) {
    e.preventDefault();
    const memEl = document.createElement('div');
    memEl.classList.add("member")
    const counter = document.createElement('input');
    const num = document.createElement('input');
    const mem = document.createElement('select');
    let memOpt = document.createElement('option');
    const removeButton = document.createElement('button');

    //  setup the drop-down members
    for (let i = 0; i < totalInheritors.length; i++) {
        memOpt.value = totalInheritors[i];
        memOpt.text = totalInheritors[i];
        memOpt.classList.add('member-name')
        mem.appendChild(memOpt);
    }
    mem.classList.add('member-group')
    memEl.appendChild(mem);

    // setup the removeButton
    removeButton.innerHTML = '<i class="fas fa-trash"></i>';
    removeButton.classList.add("trash-btn");
    memEl.appendChild(removeButton);

    // setup counter attributes
    counter.setAttribute('type', 'range');
    counter.min = 1;
    counter.max = 10;
    counter.classList.add('mem-range')
    memEl.appendChild(counter);

    // setup counter attributes
    num.setAttribute('type', 'number');
    num.min = 1;
    num.max = 10;
    num.classList.add('mem-num')
    memEl.appendChild(num);

    // setting DOM elements
    memContainer.appendChild(memEl);
};

注意我想从字符串数组生成我的选项我认为问题出在循环上，有没有关于合理循环的指南？

Answer 1

如您问题的评论中所述，发布的代码存在多个问题，这些问题要么需要修复，要么希望已经实现但尚未发布在您的代码片段中。我在你的代码中看到的主要问题是你只创建了一个 <option> 元素，并且只在循环中更新它的值和文本，而不是为每个条目创建一个 <option> 元素。

所以代替：

let memOpt = document.createElement('option');
// ...

//  setup the drop-down members
for (let i = 0; i < totalInheritors.length; i++) {
    memOpt.value = totalInheritors[i];
    memOpt.text = totalInheritors[i];
    memOpt.classList.add('member-name')
    mem.appendChild(memOpt);
}

将声明移到循环中：

for (let i = 0; i < totalInheritors.length; i++) {
  let memOpt = document.createElement('option');
  memOpt.value = totalInheritors[i];
  memOpt.text = totalInheritors[i];
  memOpt.classList.add('member-name')
  mem.appendChild(memOpt);
}

Here's a Fiddle 演示上面的内容。

如何生成带有 select 选项标签的 div 和点击按钮时的某个按钮？

How do I generate a div with select-option tags and some button on the click on a button?

javascript

html

dom-manipulation