Witam, wykonuje proste ćwiczenie tzn kalkulator i zablokowałem się. Chce zrobić symulator zwykłego kalkulatora z guzikami. Nie potrafię jednak wymyślić obsługi zdarzeń. Powinno być kliknięcie guzika -> kolejne kliknięcie i wynik, po każdym kliknięciu liczba winna ukazywać się na wyświetlaczu. Jak powiedzieć komputerowi by jedno zdarzenie "click" następowało po drugim i dopiero po drugim zwracało wynik.
document.addEventListener("DOMContentLoaded",
function() {
const buttonsIdNames =
[
'one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight',
'nine', 'zero', 'plus', 'minus',
'multi', 'divide', 'dot', 'result'
];
buttonsIdNames.forEach(element => {
clickNumberToDisplay(element);
});
}
);
function clickNumberToDisplay(id) {
const button = document.getElementById(id);
button.addEventListener("click",
function() {
const numberToDisplay = parseInt(button.value);
const display = document.getElementById('main-display');
if(!isNaN(numberToDisplay)) {
display.value = numberToDisplay;
};
}
);
}
A tu jest GUI w HTML-u :)
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>CALC 0.3</h1>
</div>
</div>
</div>
<div class="container" id="main-wrapper">
<div class="row">
<div class="col-12 nopadding">
<input type="text" class="form-control" readonly value="0" id="main-display" />
</div>
</div>
<div class="row">
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="1" id="one" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="2" id="two" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="3" id="three" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-success" value="+" id="plus" />
</div>
</div>
<div class="row">
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="4" id="four" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="5" id="five" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="6" id="six" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-success" value="-" id="minus" />
</div>
</div>
<div class="row">
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="7" id="seven" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="8" id="eight" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="9" id="nine" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-success" value="x" id="multi" />
</div>
</div>
<div class="row">
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-primary" value="0" id="zero" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-success" value="." id="dot" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-success" value="/" id="divide" />
</div>
<div class="col-3 nopadding">
<input type="button" class="btn btn-outline-danger" value="=" id="result" />
</div>
</div>
</div>
</body>
Proszę o podpowiedź :)