Javascript-форум - JS Калькулятор

Добрый день уважаемые. Пробую написать простенький калькулятор. Столкнулся с проблемой преобразования типов.

<!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, если это мат.символ заменялся на нажатый ? - иначе говоря, что б небыло ** или -+ ?