JS DOM通过循环获取点击按钮的文字具体看图

看书上的教程说是先获取所有按钮元素，然后在通过for循环来查找点击的按钮，但是我参照书上打就是没效果

img

img

img

把var改成let，了解一下var的变量提升，在给dom添加事件时，使用var会把i提升到了window上，导致事件调用的i永远是最后的i，如果你打印一下会发现i会是跳出循环时的but.length，but[but.length]取不到所以报错，所以最好就是不再使用var改成const和let，const是常量，let是变量


<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">

  </style>
</head>

<body>
  <div style="width: 100%" id='content'>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
</body>

<script>
  const but = document.getElementsByTagName('button')
  for (let i = 0; i < but.length; i++) {
    but[i].onclick = () => {
      console.log(but[i].innerHTML)
    }
  }
</script>

</html>

监听点击
$(document).on('click','.but',function(){
//获取点击的目标
$(this).html();
})

两种方法

//  第一种 用 var 声明变量  btn[i].innerHTML，会报错
for(var i=0;i<btn.length;i++){
            btn[i].onclick=function(){
                console.log(this.innerHTML)
            }
}

//第二种，用你的那种写法，但是用let声明变量
        for(let i=0;i<btn.length;i++){
            btn[i].onclick=function(){
                console.log( btn[i].innerHTML)
            }
            
        }