Variables state between functions calls in Javascript

Question

I am trying to make a simple web app, it is a remote control numpad that when I press a key it shows that number in the corresponding div element. Before I wrote the submitted code I tried the following:

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

It didn’t work and after I did some research and reading many post here I vaguely understand why; something to do with the asynchronous nature of Javascript and variable state preservation (It will be great if someone can give a clear explanation).

Now the below code almost worked with the following console error:

“Uncaught TypeError: Cannot read property 'addEventListener' of undefined”

Also the button with no. 1 is not working.

What exactly is happening, can anyone give a beginner level explanation.

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>

JS Arrays start with index 0, your loop should be from 0 to length - 1 — Stefan Blamberg, Dec 19 '18 at 10:45

score 0 · Answer 1 · answered Dec 19 '18 at 10:54

Here it works now by changing

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

to

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

because JavaScript arrays start with index 0 and end at index 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>

thank you very much, and about the code before I write the function outside the scope of event listener using var instead of let? do you have any idea why it didn't work? is it something with variable type or the structure of the code? I want to understand the concept behind all this — sammy_khaleel, Dec 19 '18 at 11:57
[This](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) will explain about `var` and `let` problem. In this case, you should have a look at the Gurpreet Singh's answer in the link for the explanation that why using `var` like this is giving out error while `let` is not. Also, if this answer of mine resolves your issue, please consider accepting it. — holydragon, Dec 20 '18 at 01:36

Variables state between functions calls in Javascript

1 Answers1