JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<input type="text" id="number-a"> *
<input type="text" id="number-b">
<input type="button" id="btn" value=" = ">
<br>
<div class="result-block">0</div>

CSS

.result-block{
    background: yellow;
    display: inline-block;
    padding: 10px;
    margin: 10px;
}

JavaScript

//функция навешивания обработчика событий. 
function addListener(domNode, eventName, handler, useCapturing){
    domNode.addEventListener(eventName, handler, useCapturing);
}
//функция для перемножения операндов
function calculate(a, b) {
    return a * b
}
//присваивание результата в нужный блок
function setResult(domNode) {
    //сначала вызываем функцию calculate с текущими значениями инпутов и возвращаем 
    //это значение. Оно записывается в result-block
    domNode.innerHTML = calculate( numADomNode.value, numBDomNode.value );
}
//функция, вызываемая обработчиком событий. 
//Она вызывается на каждый клик по кнопке
function setNewResult(){
    //Вызываем функцию вывода результата и передаём в неё блок для вывода
    setResult( resultBlock );
}
//Эти переменные доступны во всех функциях, определённых выше.
//В джаваскрипте функциональная область видимости. Ссылка на пример http://jsfiddle.net/kontrach/jj0tbu21/1/
var d = document, //сохраняем ссылку на документ
    btn = d.querySelector('#btn'),
    numADomNode = d.querySelector('#number-a'),
    numBDomNode = d.querySelector('#number-b'),
    resultBlock = d.querySelector('.result-block');

//Навешиваем обработчик событий
addListener(btn, 'click', setNewResult);
//теперь функция setNewResult будет вызываться каждый раз, когда юзер нажмёт кнопку "равно"