JavaScript 按钮返回错误警报

Question

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

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

看起来很简单。我已经建立了一个工作模型，除了它会提醒错误的号码。它提醒所有按钮的按钮 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/