JSFiddle - React, Tailwind, and code Playground
HTML
<body>
Numero 1:<input id="num1" type="number"> <br />
Numero 2:<input id="num2" type="number"> <br />
<input type="radio" name="calc" value="soma"/> Soma<br />
<input type="radio" name="calc" value="subtracao"/> Subtração<br />
<input type="radio" name="calc" value="multiplicacao"/> Multiplicação<br />
<input type="radio" name="calc" value="divisao"/> Divisão<br />
<button onclick="main()">Calcular</button><br />
Resposta: <div id="resp"></div>
JavaScript
function main() {
// radio que está marcado
var opcao = document.querySelector('input[name=calc]:checked');
if (! opcao) { // pode ser que nenhum esteja marcado
console.log('Escolha uma operação');
return; // sai da função (se nenhum foi marcado, não tem motivo pra continuar)
}
var resp = document.getElementById('resp');
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var texto;
switch (opcao.value) {
case 'soma':
texto = soma(num1, num2);
break;
case 'subtracao':
texto = subtracao(num1, num2);
break;
case 'multiplicacao':
texto = multiplicacao(num1, num2);
break;
case 'divisao':
texto = divisao(num1, num2);
break;
default:
console.log('operação inválida');
return;
}
resp.innerText = texto;
}
function soma(x, y) {
return (x + y);
}
function subtracao(x, y) {
return (x - y);
}
function multiplicacao(x, y) {
return (x * y);
}
function divisao(x, y) {
return (x / y);
}