цикл через кнопку калькулятора в JS

Question

цикл через кнопку калькулятора в JS

1

Здравствуйте, я сейчас новичок в javascript и у меня возникли проблемы с пониманием реальной работы цикла for в калькуляторе. Я хочу знать, почему мы перебираем кнопки и как JavaScript работает за кулисами.

Вот код, с которым я борюсь:

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>

На самом деле я знаю, как будет работать код, проблема в том, что я хочу знать, как цикл for может получить точное значение кнопки путем цикла, а не любое другое значение, поскольку переменная "i" продолжает увеличиваться на значение 1. if "i увеличивается, как он может точно индексировать мою кнопку? Ну спасибо заранее

M.arsh 21 дек. 2018, в 11:53

Источник

0

Вы перебираете список кнопок, чтобы прослушать событие нажатия. Одно дело отобразить калькулятор, но взаимодействовать с ним, когда вы нажимаете что-то, что вы ожидаете, что javascript сделает что-то, что делает addEventListener.
Eponyme Web 21 дек. 2018, в 10:29
0

Научитесь использовать map () для.
Old Ben Murphy 21 дек. 2018, в 10:30

Теги:

javascript

2 ответа

Ещё вопросы

Вы перебираете список кнопок, чтобы прослушать событие нажатия. Одно дело отобразить калькулятор, но взаимодействовать с ним, когда вы нажимаете что-то, что вы ожидаете, что javascript сделает что-то, что делает addEventListener.

StackStonic · Answer 1 · 2018-12-21T08-02-00.000Z

1

Если у вас возникли проблемы с итерацией в целом, что это, я хотел бы оставить вас эти учебники: Массив итерацию, итерацию В целом.

Теперь для объяснения того, что делает ваш код.

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')) 
     })
}

StackStonic 21 дек. 2018, в 08:02

0

На самом деле я знаю, как будет работать код, проблема в том, что я хочу знать, как цикл for может получить точное значение кнопки за счет цикла, а не любое другое значение, так как переменная "i" продолжает увеличиваться на значение 1.if "i увеличивается, как он может точно индексировать мою кнопку? Ну спасибо заранее
user10819677 21 дек. 2018, в 10:52
0

Вы получаете список индексов кнопок от 0 до Количество кнопок и берете одну кнопку за раз и прикрепляете к ней событие щелчка.
tabby 21 дек. 2018, в 11:03
0

Спасибо, я понял.
user10819677 21 дек. 2018, в 11:07
0

Ну, как я уже говорил, это в основном итерация . итерация, в основном проходящая через каждый элемент / индекс внутри iterator , видео Итерация В общем, я предоставил в ответе, охватывает это более подробно. И если вам интересно, откуда i keypadBtn.length , правильная ли это кнопка или нет ... ну, это не так ... i просто число в диапазоне от 0 до keypadBtn.length , keypadBtn - это NodeList содержащий кнопки (NodeList является массивом типа fyi), зная это, вы можете сделать keypadBtn[0] и он вернет первую кнопку, keypadBtn[1] second, keypadBtn[2] третью и т. д.
StackStonic 21 дек. 2018, в 11:08
0

Что я на самом деле понимаю, так это (поправьте меня, если я ошибаюсь) - цикл for записывает мой код, сколько раз кнопка действительно была там. И затем выполнение определенного кода кнопки индекса, когда я нажимаю эту кнопку.
user10819677 21 дек. 2018, в 12:37

Показать ещё 3 комментария

devedv · Answer 2 · 2018-12-21T08-33-00.000Z

Код, который вы написали выше, добавляет событие click ко всем кнопкам. Цикл здесь для прохождения каждой кнопки (div). Прочитайте комментарии ниже:

 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
         })
    }