JavaScript:有条件的按钮创建和删除

Question

我必须解决一个听起来像这样的问题：

我有一个 HTML 文件，其中包含：

1 个输入 1 个没有值
的选择 1 个
按钮 - "开始">

按下"开始"按钮后，将在 3 到 3 秒内创建新按钮，名称和 ID 为"B1"、"B2"、"B3"，直到达到输入中输入的值。

单击如此创建的按钮，它将消失，其ID将作为选项显示在选择中。

这就是我到目前为止所做的，但我不知道如何继续。

window.onload
{
document.getElementsByTagName("button")[0].onclick = function ()
{
if(document.getElementsByTagName("input")[0].value > 0)
{
var i=1;
var n = document.getElementsByTagName("input")[0].value;
var addButtons = setInterval(function() 
{ 
if(i==n) clearInterval(addButtons);
var button = document.createElement("BUTTON");
button.setAttribute("id", "b"+i);
document.body.appendChild(button);
i=i+1;
}, 3000);
}
};
}

Answer 1

1-由于性能问题，不要使用document.getElementsByTagName而是使用document.querySelectorAll。

2-为每个新按钮定义此事件侦听器

button.addEventListener('click', function(e) {
e.target.style.display = 'none';
var option = document.createElement('option');
option.innerHTML = e.target.name;
document.querySelectorAll("select")[0].append(option)
});

完整代码

document.getElementsByTagName("button")[0].onclick = function() {
if (document.getElementsByTagName("input")[0].value > 0) {
var i = 1;
var n = document.getElementsByTagName("input")[0].value;
var addButtons = setInterval(function() {
if (i == n) clearInterval(addButtons);
var button = document.createElement("BUTTON");
button.setAttribute("id", "b" + i);
button.setAttribute("name", "b" + i);
button.innerHTML = "B" + i;
button.addEventListener('click', function(e) {
e.target.style.display = 'none';
var option = document.createElement('option');
option.innerHTML = e.target.name;
document.querySelectorAll("select")[0].append(option)
});
document.body.appendChild(button);
i = i + 1;
}, 3000);
}
};

<button>Click me</button>
<input type="number" />
<select></select>