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() {
    var result = firstNumberNode.value * secondNumberNode.value
    resultNode.innerHTML = result
}


var firstNumberNode = document.querySelector('.firstNumber');
var secondNumberNode = document.querySelector('.secondNumber');
var buttonNode = document.querySelector('.btn');
var resultNode = document.querySelector('.result');
//добавляем обработчик событий
buttonNode.addEventListener('click', calculate);

/*
var arg1 = document.querySelector('.firstN').value;
var arg2 = document.querySelector('.secondN').value;
var resmult = function () { // здесь уже переменная с анонимной функцией
    var res = document.querySelector('.btn');
    res.addEventListener('click', calculate, false); //здесь обращаемся к верхней функции
    var resblock = document.querySelector('.result');
    resblock.value = mult;
};

calculate(arg1, arg2);
*/