#javascript #html
#javascript #HTML
Вопрос:
У меня есть 2 группы кнопок HTML, все с классом btn
.
const btn = document.querySelectorAll('.btn');
const btnArray = Array.from(btn);
btnArray.forEach((item) => {
item.addEventListener('click', () => {
console.log('clicked');
console.log(item.value)
});
});
<div class="calculator">
<div class="display">
<p class="output">YES</p>
</div>
<div class="operations">
<input type="submit" class="btn add" value=' '>
<input type="submit" class="btn subtract" value='-'>
<input type="submit" class="btn multiply" value='x'>
<input type="submit" class="btn divide" value=amp;divide;>
<input type="submit" class="btn clear" value='CLEAR'>
</div>
<div class="calcBody">
<input type="submit" class="btn seven" value='7'>
<input type="submit" class="btn eight" value='8'>
<input type="submit" class="btn nine" value='9'>
<input type="submit" class="btn four" value='4'>
<input type="submit" class="btn five" value='5'>
<input type="submit" class="btn six" value='6'>
<input type="submit" class="btn one" value='1'>
<input type="submit" class="btn two" value='2'>
<input type="submit" class="btn three" value='3'>
<input type="submit" class="btn zero" value='0'>
<input type="submit" class="btn period" value='.'>
<input type="submit" class="btn off" value='ON/OFF'>
</div>
</div>
Это работает только с кнопками в calcBody
div, а не с кнопками в operations
div. Тем не менее, когда я console.log(btnArray)
показываю все кнопки (что странно).
Может кто-нибудь сказать мне, почему? Спасибо.
Комментарии:
1. почему вы используете Array. если вы можете напрямую перебирать его в своем фрагменте, вы можете правильно нажимать каждую кнопку
2. Я действительно не понимаю проблемы, я протестировал ваш код, и он работает без каких-либо проблем. Даже те, которые находятся за пределами calcBody.
3. «Это работает только с кнопками в calcBody» Откуда вы знаете? Это неправильно, если вы скопируете этот код и запустите его в codepen, он одинаково работает для всех кнопок
4. Я думаю, что это работает хорошо
5. По какой-то причине он функционирует в codepen, но не в консоли, когда я открываю файл в Chrome
Ответ №1:
работает отлично! Я проверил это в Google Chrome.