javaScript生成十个按钮，每次点击的时候弹出1-10

 

一、我们可以使用下面这种方式，去弹出innerText或者innerHTML

for (i = 1; i <= 10; i++) {
　　var btn = document.createElement("button");
　　btn.innerText = i;
　　btn.onclick = function () {
　　　　alert(this.innerText);
　　}
　　document.body.appendChild(btn);
}

 

二、我们还可以使用自定义函数

for (i = 1; i <= 10; i++) {
    (function (i) {
        var btn = document.createElement("button");
        btn.innerText = i;
        btn.onclick = function () {
            alert(i);
        }
        document.body.appendChild(btn);
    })(i);
}

// 这里是因为自执行函数形成了一个独立的函数作用域
// 如果我们把自执行函数去掉，我们每次执行点击事件弹出的提示都会是11
// 这是因为在代码执行时，For循环是在加载页面时瞬间执行完毕的，
// 而点击事件是当我们点击出发时才会执行的，也就是说当执行点击事件时，i已经变成了11

 

三、还有一种就是给每个按钮添加一个自定义属性来记录他们的索引

for (var i = 1; i <= 10; i++) {
　　var btn = document.createElement("button");
　　btn.innerText = i;
　　// 给每个生成的按钮添加一个自定义属性，并赋值i
　　btn.setAttribute('index',i);
　　btn.onclick = function () {
　　　　alert(this.getAttribute('index'));
　　}
　　document.body.appendChild(btn);
}

 

 

四、我们还可以使用ES6的语法，直接使用let

// 这里是因为let声明的变量会自动生成一个块级作用域
for (let i = 1; i <= 10; i++) {
    var btn = document.createElement("button");
    btn.innerText = i;
    btn.onclick = function () {
        alert(i);
    }
    document.body.appendChild(btn);
}

 

```