Question

我正在申请工作，他们提出了一个JS问题，详情如下：

编写一个函数，在页面上渲染10 <button>个元素，编号为1到10，并在单击一个时提醒所选按钮的编号。不使用jQuery或任何其他库。

似乎很容易。我建立了一个工作模型，除了它提醒错误的号码。它会向Button 11发出所有按钮的警报。我知道我忘了简单的事情。下面是我的代码（如果你有更好的组织方式，可以随意批评它）。此处还有JSFiddle的链接，可以保存警报。

var count = 1;

function createBtn(){
  var button = document.createElement("button");
  button.innerHTML = "Button " + count;
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(button);
  button.addEventListener ("click", function() {
    alert('Button ' + count);
  });
}

function buttonRender(){
  for(var i = 0; i < 10; i++){
    createBtn();
    count++;
  }
}

buttonRender();

Answer 1

你应该将计数传递给函数。

function createBtn(count){
  var button = document.createElement("button");
  button.innerHTML = "Button " + count;
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(button);
  button.addEventListener ("click", function() {
    alert('Button ' + count);
  });
}

function buttonRender(){
  for(var i = 0; i < 10; i++){
    createBtn(count);
    count++;
  }
}

https://jsfiddle.net/xw7mhag2/

Answer 2

var count = 0;

  function createBtn(count){
    var button = document.createElement("button");
    button.innerHTML = "Button " + count;
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(button);
    button.addEventListener ("click", function() {
      alert("Button " + count);
    });
  }

  function buttonRender(){
    for(var i = 0; i < 10; i++){
    count++;
      createBtn(count);

    }
  }

  buttonRender();

JavaScript按钮返回错误警报

2 个答案: