js实现改变多个按钮的内容ABCD
原创
©著作权归作者所有：来自51CTO博客作者JackieDYH的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var btn = document.getElementsByTagName('button');
var arr = ['A', 'B', 'C', 'D'];
// console.log(btn,arr);
for (var a = 0; a < btn.length; a++) {
btn[a].idx = a;
//我们在这里可以给每一个按钮添加一个自定义属性，用来记录点击当前按钮的次数
btn[a].j = 0;
btn[a].onclick = function () {
//每次点击，点击次数就自加一次
this.j++;
//如果次数变为4，就证明当前已经显示d，之后又点击了一次，就让次数重新归零
if(this.j==4){
this.j = 0;
}
//渲染按钮内容
this.innerText = arr[this.j];
// console.log(btn[this.idx]);
// for (i = 0; i < arr.length; i++) {
// arr[i].index = i;
// btn[this.idx].innerHTML = arr[i];
// }
}
}
}
</script>
</head>
<body>
<button id="btn">A</button>
<button id="btn">A</button>
<button id="btn">A</button>
<button id="btn">A</button>
<button id="btn">A</button>
<!-- <button id="b">A</button>
<button id="c">A</button>
<button id="D">A</button>
<button id="D">A</button> -->
</body>
</html>
