JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<input type="text" class='firstN'>*
<input type="text" class='secondN'>
<input type="button" class="btn" value="=">
<br/>
<div class="result"></div>

CSS

.result {
    margin-top: 30px;
    height: 50px;
    width: 100px;
    background: yellow;
    color: red;
    font: 24px Verdana;
}

JavaScript

//определяем функцию расчёта
function calculate(a, b) {
    //эти аргументы передаются с помощью addEventListener
    console.log('аргументы функции: ' ,arguments);
    //после того, как функция вызывается с помощью клика, аргументы уже не те, что ожидаются. 
    mult = a * b;
    //return mult;
    //так будет работать 
    resblock.innerHTML = mult;
}
//находим первый инпут
var arg1 = document.querySelector('.firstN').value;
//находим второй инпут
var arg2 = document.querySelector('.secondN').value;
var resblock = document.querySelector('.result');
//определяем функцию
var resmult = function () { // здесь уже переменная с анонимной функцией
    var res = document.querySelector('.btn');
    res.addEventListener('click', calculate, false); //здесь обращаемся к верхней функции
    //calculate возвращает результат, который никуда не записывается.
    //var resblock = document.querySelector('.result');
    //resblock.value = mult;
    
};
//вызываем функцию расчёта только один раз
//в первый раз значения инпутов будет пустым
calculate(arg1, arg2);
//resmult фнукция вообще не вызывается. Только объявляется

resmult();