JSFiddle - React, Tailwind, and code Playground
HTML
<form id="formulario">
<p>Digite o primeiro número</p>
<input type="text" name="valor1" value="0">
<p>Digite o segundo número</p>
<input type="text" name="valor2" value="0">
<p>Resultado</p>
<input type="text" name="resultado" disabled="disabled">
<br/>
<br/>
<table>
<caption>Operações</caption>
<tr>
<th><a href="#" data-onclick="getSoma">SOMAR</a></th>
<th><a href="#" data-onclick="getSubtracao">SUBTRAIR</a></th>
</tr>
<tr>
<th><a href="#" data-onclick="getMultiplicacao">MULTIPLICAR</a></th>
<th><a href="#" data-onclick="getDivisao">DIVIDIR</a></th>
</tr>
</table>
</form>
JavaScript
function Calculadora() {
this.init = function(id) {
this.formulario = document.getElementById(id);
this.valor1 = this.formulario.valor1;
this.valor2 = this.formulario.valor2;
this.resultado = this.formulario.resultado;
var acoes = this.formulario.querySelectorAll('table th a');
for (var i = 0; i < acoes.length; i++) {
acoes[i].addEventListener('click', this.doAction.bind(this));
}
}
this.doAction = function(e) {
var el = e.target;
var action = el.dataset.onclick;
this[action]();
}
this.getValues = function() {
return [this.valor1.value, this.valor2.value].map(Number);
}
this.getSoma = function soma() {
var val = this.getValues();
this.escreve(val[0] + val[1])
}
this.getSubtracao = function subtracao() {
var val = this.getValues();
this.escreve(val[0] - val[1])
}
this.getMultiplicacao = function multiplicacao() {
var val = this.getValues();
this.escreve(val[0] * val[1])
}
this.getDivisao = function divisao() {
var val = this.getValues();
this.escreve(val[0] / val[1])
}
this.escreve = function(txt) {
this.resultado.value = txt;
}
}
new Calculadora().init('formulario');