变量在JavaScript中的函数调用之间状态

我正在尝试制作一个简单的Web应用程序，这是一个遥控控制数字，当我按键时，它在相应的DIV元素中显示该数字。在编写提交的代码之前，我尝试了以下内容：

for(var i=1;i<btnNumber.length;i++){
  btnNumber[i].addEventListener("click", function(){
    dvNumber[i].textContent=this.textContent;
  })
}

它不起作用，在我进行了一些研究并在这里阅读了许多帖子之后，我模糊地理解了原因。与JavaScript和可变状态保存的异步性有关（如果有人可以给出明确的解释，那将是很棒的）。

现在，以下代码几乎可以处理以下控制台错误：

" undureck typeError：无法阅读属性'addeventListener'的'addeventListener''

也没有。1不起作用。

到底发生了什么，任何人都可以给出初学者的解释。

var btnNumber=document.querySelectorAll("button")
var dvNumber=document.querySelectorAll("div")
for(let i=1;i<=btnNumber.length;i++){
    btnNumber[i].addEventListener("click", function(){
    writeDiv(i,this)   
    })
}
function writeDiv(i,obj){
    dvNumber[i].textContent=obj.textContent;
}

div{
    width:200px;
    height: 200px;
    float: left;
    border: 4px solid gray;
    text-align: center;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="testingpagelayout.css">
    <title>Document</title>
    </head>
<body>
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <br>
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <br>
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <br>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    <script src="testingpagelayout.js"></script>
</body>
</html>

在这里它可以通过更改

来工作

for(let i=1;i<=btnNumber.length;i++)

for(let i=0;i<btnNumber.length;i++)

因为JavaScript数组以索引0开头，以索引长度结束。

var btnNumber=document.querySelectorAll("button")
var dvNumber=document.querySelectorAll("div")
for(let i=0;i<btnNumber.length;i++){
    btnNumber[i].addEventListener("click", function(){
    writeDiv(i,this)   
    })
}
function writeDiv(i,obj){
    dvNumber[i].textContent=obj.textContent;
}

div{
    width:200px;
    height: 200px;
    float: left;
    border: 4px solid gray;
    text-align: center;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="testingpagelayout.css">
    <title>Document</title>
    </head>
<body>
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <br>
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <br>
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <br>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    <script src="testingpagelayout.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：