Добрый день уважаемые. Пробую написать простенький калькулятор. Столкнулся с проблемой преобразования типов.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator</title>
<style>
body {
height: 100%;
min-height: 80vh;
max-width: 100vw;
}
.bl_calculator {
width: 320px;
min-height: 400px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
background-color: #313335;
}
.bl_calculator__label {
display: block;
width: 100%;
margin: 10px 0;
height: 46px;
}
.bl_calculator__input {
width: calc(100% - 10px);
height: 100%;
padding-right: 10px;
outline: none;
border: 1px solid #555;
font-size: 32px;
text-align: right;
}
.fild_buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 10px;
}
.btn_key {
display: block;
height: 72.5px;
border: 1px solid #555;
cursor: pointer;
font-size: 32px;
}
.btn_reset {
grid-column: 3 / 5;
}
</style>
</head>
<body>
<div class="bl_calculator">
<label class="bl_calculator__label"><input class="bl_calculator__input" type="text" autofocus></label>
<div class="fild_buttons">
<button class="btn_key btn_reset" type="button">RESET</button>
<button class="btn_key btn_number btn_7" type="button">7</button>
<button class="btn_key btn_number btn_8" type="button">8</button>
<button class="btn_key btn_number btn_9" type="button">9</button>
<button class="btn_key btn_action btn_divide " type="button">/</button>
<button class="btn_key btn_number btn_4" type="button">4</button>
<button class="btn_key btn_number btn_5" type="button">5</button>
<button class="btn_key btn_number btn_6" type="button">6</button>
<button class="btn_key btn_action btn_multiply" type="button">*</button>
<button class="btn_key btn_number btn_1" type="button">1</button>
<button class="btn_key btn_number btn_2" type="button">2</button>
<button class="btn_key btn_number btn_3" type="button">3</button>
<button class="btn_key btn_action btn_substract" type="button">-</button>
<button class="btn_key btn_number btn_0" type="button">0</button>
<button class="btn_key btn_action btn_point" type="button">.</button>
<button class="btn_key btn_result" type="button">=</button>
<button class="btn_key btn_action btn_plus" type="button">+</button>
</div>
</div>
<script>
window.onload = function () {
var result = 0,
inputFild = document.querySelector(".bl_calculator__input"),
btn_number = document.querySelectorAll(".btn_number"),
btn_action = document.querySelectorAll(".btn_action"),
btn_reset = document.querySelector(".btn_reset"),
btn_divide = document.querySelector(".btn_divide"),
btn_multiply = document.querySelector(".btn_multiply"),
btn_substract = document.querySelector(".btn_substract"),
btn_point = document.querySelector(".btn_point"),
btn_plus = document.querySelector(".btn_plus"),
btn_result = document.querySelector(".btn_result");
for(var i= 0; i <btn_number.length; i++){
btn_number[i].addEventListener( "click" , function(){
console.log("result now = " + result);
var currVal = this.innerHTML;
if(result===0){result='';}
result = parseFloat(result+currVal);
// result = Number(result);
inputFild.setAttribute('value', result);
console.log("Type result =" + typeof(result));
return result;
});
}
for (i = 0; i < btn_action.length; i++ ){
btn_action[i].addEventListener( "click" , function(){
var currVal = this.innerHTML;
result = result+currVal;
inputFild.setAttribute('value', result);
console.log("Type result =" + typeof(result));
return result;
});
}
btn_reset.addEventListener( "click" , function() {
result = 0;
inputFild.setAttribute('value', result);});
};
</script>
</body>
</html>
Не могу понять почему после нажатия на кнопку операции (предположим + ), а дальше на число не происходит процесс сложения ?
Почему не срабатывает var result = parseFloat(result+currVal); ? Я ведь по сути строку совмещаю со строкой, а потом пытаюсь преобразовать это в число?
И ещё вопрос, как сделать проверку, что б предыдущий символ в input, если это мат.символ заменялся на нажатый ? - иначе говоря, что б небыло ** или -+ ?