时间戳

首页 > 解决方案 > Javascript中函数调用之间的变量状态

javascript - Javascript中函数调用之间的变量状态

问题描述

我正在尝试制作一个简单的网络应用程序，它是一个远程控制小键盘，当我按下一个键时，它会在相应的 div 元素中显示该数字。在我编写提交的代码之前，我尝试了以下操作：

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

它没有用，在我做了一些研究并在这里阅读了很多帖子之后，我隐约明白了为什么；与 Javascript 的异步特性和变量状态保存有关（如果有人能给出清晰的解释，那就太好了）。

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

“未捕获的 TypeError：无法读取未定义的属性 'addEventListener'”</p>

还有没有的按钮。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>

标签： javascriptdom-events

解决方案

在这里它现在可以通过改变

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

至

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

因为 JavaScript 数组从索引 0 开始，以索引 length-1 结束。

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>

推荐阅读