Итак, я пытаюсь создать калькулятор, и первое, что я хочу сделать, это отобразить все кнопки в моем выводе. Я создал функцию с именем displayButtons и внутри, я получил первые 2 кнопки по идентификатору, однако, когда я пытаюсь их отобразить, отображается только номер 2. Один из способов исправить это - создать функцию для каждого числа, и тогда она будет работать, но это не то, чего я хочу. Я также пытался вложить функции для каждого числа в функцию, но мне не удалось правильно вызвать ее при нажатии. Любые идеи? Заранее спасибо!
HTML-код:
<div id = "output"></div>
<div class = "numbers">
<button value = "1" id = "one" onclick = "displayButtons()">1</button>
<button value = "2" id = "two" onclick = "displayButtons()">2</button>
JS-код:
function displayButtons() {
var one = document.getElementById("one").value;
document.getElementById("output").innerHTML = one;
var two = document.getElementById("two").value;
document.getElementById("output").innerHTML = two
}
Вы пробовали цикл for? вы сможете добавить функциональность щелчка с помощью ключевого слова 'let' или отдельной функции.. запустите следующее в codepen, посмотрите, как это работает, и может ли это быть чем-то полезным.
function createButtons() {
//let is block scoped, not function scoped
for (let i = 1; i <= 5; i++) {
var body = document.getElementsByTagName("BODY")[0];
var button = document.createElement("BUTTON");
button.innerHTML = 'Button ' + i;
button.onclick = function() {
alert('This is button ' + i);
}
body.appendChild(button);
}
}
createButtons();
Вы должны получить идентификатор каждой кнопки в параметре onclick, например: onclick = displayButtons (идентификатор) он создаст другое событие клика для каждой кнопки, а затем
function displayButton(id){
let oldValue = document.getElementById("output").innerHtml
document.getElementById("output").innerHTML = oldValue + id;}
Чтобы отобразить вывод при нажатии чисел, вы можете передать объект this
внутри функции, подобной этой.
<button value = "1" id = "one" onclick = "displayButtons(this)">1</button>
и когда вы нажмете на нее, вы получите узел кнопки внутри функции полный код будет
<div class = "numbers">
<button value = "1" id = "one" onclick = "displayButtons(this)">1</button>
<button value = "2" id = "two" onclick = "displayButtons(this)">2</button>
</div>
<script>
function displayButtons(button) {
document.getElementById("output").innerHTML += button.value
}
</script>
Вы продолжаете перезаписывать innerHTML
, поэтому видите только 2.
Я рекомендую вам изменить свой подход. Все ваши кнопки находятся в div.numbers
. Добавьте прослушиватель событий одного клика в div чисел. Этот прослушиватель событий сработает, если будет нажата любая из кнопок, потому что всплывает всплывающее окно события щелчка. Это называется делегация мероприятия.
В обработчике события клика вы можете увидеть, что кнопка который была нажата, и добавить value
нажатой кнопки к div#output
.
const output = document.querySelector('#output');
const numbers = document.querySelector('.numbers');
numbers.addEventListener('click', event => {
const button = event.target;
output.textContent += button.value;
});
<div id = "output"></div>
<div class = "numbers">
<button value = "1">1</button>
<button value = "2">2</button>
<button value = "3">3</button>
<button value = "4">4</button>
<button value = "5">5</button>
</div>
Оно работает! Большое спасибо, я очень ценю это.
Большое спасибо, это тоже работает, я очень ценю это.