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>

JavaScript：条件按钮的创建和删除

1 个答案: