looping through calculator button in js

Question

Hello I am currently new at javascript and having some problem understanding the actual work of for loop in a calculator. I want to know why we are looping through buttons and how javascript is working behind the scenes.

Here is the code i am struggling with:

 let keypadBtn = document.querySelectorAll(".op-btn"); for(let i = 0; i < keypadBtn.length; i++){ keypadBtn[i].addEventListener("click",function(){ console.log(keypadBtn[i].getAttribute("data-num")); }) }

 <div class="buttons"> <div class="op-btn btn-yellow" data-num = "*">*</div> <div class="op-btn btn-yellow" data-num = "/">/</div> <div class="op-btn btn-yellow" data-num = "-">-</div> <div class="op-btn btn-yellow" data-num = "+">+</div> <div class="op-btn btn-white" data-num = ".">.</div> <div class="op-btn btn-white" data-num = "9">9</div> <div class="op-btn btn-white" data-num = "8">8</div> <div class="op-btn btn-white" data-num = "7">7</div> <div class="op-btn btn-white" data-num = "6">6</div> <div class="op-btn btn-white" data-num = "5">5</div> <div class="op-btn btn-white" data-num = "4">4</div> <div class="op-btn btn-white" data-num = "3">3</div> <div class="op-btn btn-white" data-num = "2">2</div> <div class="op-btn btn-white" data-num = "1">1</div> <div class="op-btn btn-white" data-num = "0">0</div> <div class="op-btn btn-green">=</div> <div class="op-btn btn-red">C</div> </div>

Actually I know how the code will work the problem is i want to know how the for loop is able to get the exact button value by looping and not any other value, as variable "i" keep on increasing by value 1. if "i" is increasing how it is able to exactly index my button ? Well Thanks in advance

Answer 1

If you're having trouble with iteration in general which this is, I would leave you to these tutorials : Array Iteration , Iteration In General .

Now for an explanation on what your code does.

let keypadBtn = document.querySelectorAll('.op-btn') // Grabs all elements containing this the `.op-btn` class

for (let i = 0; i < keypadBtn.length; i++) { // Initializing the for loop
     keypadBtn[i].addEventListener('click', () => { // Attach the click event to each of the buttons
        // Once click this `console.log` will fire printing 
        // the element you clicked to browser console
        console.log(keypadBtn[i].getAttribute('data-num')) 
     })
}

Answer 2

The code you wrote above add the click event to all buttons. The loop here is to traverse each button(div). Read comments below:

 let keypadBtn = document.querySelectorAll(".op-btn"); //Select all divs. It picks all the items with class name .opt-btn

    for(let i = 0; i < keypadBtn.length; i++){ 
        keypadBtn[i].addEventListener("click",function(){ //attach click event to each button
            console.log(keypadBtn[i].getAttribute("data-num")); // you can get the values here and based on it you can calculate the result
         })
    }