一、使用自定义函数
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
二、我们还可以使用下面这种方式,去弹出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 (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);
}