JSFiddle - React, Tailwind, and code Playground

HTML

<div>Enter value 1
    <input type="text" id="txt1" />
    <br />Enter value 2
    <input type="text" id="txt2" />
    <br />
    <button id="btnCalc">Calculate product</button>
    <div id="result"></div>
</div>
</script>
<div>Enter value 1
    <input type="text" id="od1" />
    <br />Enter value 2
    <input type="text" id="od2" />
    <br />
    <button id="od">Calculate difference</button>
    <div id="re"></div>
</div>

JavaScript

function calcResult(resultId, valId, val2Id, operation) {
    var $result = document.getElementById(resultId);
    $result.innerHTML = '';
    var num1 = new Number(document.getElementById(valId).value);
    var num2 = new Number(document.getElementById(val2Id).value);
    if (isNaN(num1) || isNaN(num2)) {
        alert('One or both inputs are not a number');
    } else {
        $result.innerHTML = operation(num1, num2);
    }
}
window.onload = function () {
    document.getElementById('btnCalc').onclick = function () {
        calcResult('result', 'txt1', 'txt2', function (num1, num2) {
            return num1 * num2;
        });
    }
    document.getElementById('od').onclick = function () {
        calcResult('re', 'od1', 'od2', function (num1, num2) {
            return num1 - num2;
        });
    };
}