JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<input type="text" class='firstNumber'>*
<input type="text" class='secondNumber'>
<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) {
	mult = a * b;
	resblock.innerHTML = mult; // как вторая функция будет видеть этот resblock? Разве только при вызове внизу указать ее имя(calculate) в скобках? - Вот так resmult(calculate);   - что тоже не меняет ситуации (не работает)
    //ответ: вторую функцию ты используешь только для того, чтобы навесить обработчик событий. И никак она не зависит от функции calculate.
    
}

var arg1 = document.querySelector('.firstN').value;
var arg2 = document.querySelector('.secondN').value;

var resblock = document.querySelector('.result');
//Я бы переименовл эту функцию в addListener и в её теле навешивал бы обработчик
/*function addListener(){
   btn.addEventListener('.click', calculate);
}*/
function resmult () {
	var res = document.querySelector('.btn');
    //тут идёт зацикливание. В обработчике событий ты даёшь ссылку на ту же самую
    //функцию resmult, в теле которой мы находимся
    //по нажатию добавляется опять обработчик, который добавляет обработчик )
	res.addEventListener('.click', resmult, false);

	var resblock = document.querySelector('.result');
}

calculate(arg1, arg2);
//здесь ты навешиваешь обработчик событий, который срабатывает на клик по кнопке, который опять вызывает ту же самую функцию, которая навешивает обработчик событий на клик по кнопке, который навешивает обработчик ...
resmult();