CSS - kalkulator 01f
https://tworcastron.pl
ZADANIE 1 - KalkulatorNapisz prosty kalkulator:
- 2 pola na liczby (typu number)
- 4 buttony (+ - / *)
- Wynik powinien pojawiać się na dole "Wynik: x"
- W przypadku prółby dzielenia przez 0 wyświetl błąd "Nie moźna dzielić przez 0"
<input type="number" id="number01" />
<input type="number" id="number02" />
<button id="add">dodawanie</button>
<button id="sub">odejmowanie</button>
<button id="mul">mnożenie</button>
<button id="div">dzielenie</button>
<p>Wynik: <span id="result"></span></p>
<p id="error"></p>
<script type="text/javascript">
const number1 = document.querySelector('#number01');
const number2 = document.querySelector('#number02');
const addButton = document.querySelector('#add');
const subButton = document.querySelector('#sub');
const mulButton = document.querySelector('#mul');
const divButton = document.querySelector('#div');
const showResult = number => {
document.querySelector('#result').innerHTML = number;
};
const add = (a, b) => {
return Number(a) + Number(b);
};
let result;
addButton.addEventListener('click', () => {
showResult(add(number1.value, number2.value));
});
subButton.addEventListener('click', () => {
result = Number(number1.value) - Number(number2.value);
showResult(result);
});
mulButton.addEventListener('click', () => {
result = Number(number1.value) * Number(number2.value);
showResult(result);
});
divButton.addEventListener('click', () => {
document.querySelector('#error').innerHTML = '';
if (number2.value == 0) {
document.querySelector('#error').innerHTML = 'Nie można dzielić przez 0';
} else {
result = Number(number1.value) / Number(number2.value);
showResult(result);
}
});
</script>
wynik skryptu
Wynik: