Javascript Dificuldade ao fazer uma calculadora básica utilizando HTML + Javascript

Matheus Dutra · 11 de fevereiro de 2022

Olá, estou fazendo uma calculadora básica no HTML + JS.

Que é basicamente assim:

Numero 1: Numero 2:

+ - * /

Resultado:

Estou em dúvida, em como passar o valor do resultado de uma soma no javascript, para o elemento "resposta" no HTML, e faze-lo aparecer.

Segue o código abaixo.

HTML:

<meta charset="utf-8">
<html>

    <head><title>Calculadora com JS</title></head>
    <script src="EX7_calculadora.js"></script>
    <body>
        
        <div>
            <form>

                <label for="numero1">Número 1: </label>
                <input type="number" id="numero1">

                <label for="numero2">Numero 2: </label>
                <input type="number" id="numero2"> <br> <br>

                <input type="button" onclick="calculadora(this)" id="mais" value="+">
                <input type="button" onclick="calculadora(this)" id="vezes" value="*">
                <input type="button" onclick="calculadora(this)" id="menos" value="-">
                <input type="button" onclick="calculadora(this)" id="dividido" value="/"> <br> <br>

                <label for="resultado">Resultado: </label>
                <input type="text" id="resultado">

            </form>
        </div>

    </body>

</html>

Javascript:

function calculadora(){

var number1 = document.getElementById("numero1");
var number2 = document.getElementById("numero2");
 
var resposta = document.getElementById('mais');
mais.onclick = function somara() {

    var somar = number1 + number2;
    document.write(somar);
} 

var resposta = document.getElementById('vezes');
vezes.onclick = function somara() {

    var multiplicar = number1 * number2;
    document.write(multiplicar);
} 

var resposta = document.getElementById('menos');
menos.onclick = function somara() {

    var subtrair = number1 - number2;
    document.write(subtrair);
} 

var resposta = document.getElementById('dividido');
dividido.onclick = function somara() {

    var dividir = number1 / number2;
    document.write(dividir);
} 

}

Matheus Dutra · 12 de fevereiro de 2022

HTML:

<meta charset="utf-8">
<html>

    <head><title>Calculadora com JS</title>
        <link href="EX9_estilo.css" rel="stylesheet">
    </head>
    <script src="EX7_calculadora.js"></script>
    <body>
        
        <div>
            <form name="calcform" method="post" action="">
                <fieldset>
             
                   <label for="valor1">Digite o valor <strong>1</strong>:</label>
                   <input type="text" name="valor1" id="valor1" />
             
                   <label for="valor2">Digite o valor <strong>2</strong>:</label>
                   <input type="text" name="valor2" id="valor2" />
             
                   <label for="oper">Selecione a operação:</label>
                   <select name="oper" id="oper">
                      <option value="somar">Somar</option>
                      <option value="subtrair">Subtrair</option>
                      <option value="multiplicar">Multiplifcar</option>
                      <option value="dividir">Dividir</option>
                   </select>
             
                   <label for="res">Resultado:</label>
                   <input type="text" name="res" id="res" />
             
                   <input type="button" value="Calcular" class="botao" onClick="calcular(document.calcform.oper.value)">
                </fieldset>
             </form>
        </div>

    </body>

</html>

Javascript:

function calcular(oper) {
    var valor1 = document.calcform.valor1.value;
    var valor2 = document.calcform.valor2.value;
 
    if (oper == "somar") {
       var res = parseInt(valor1) + parseInt(valor2);
    } else {
       if (oper == "subtrair") {
          var res = valor1-valor2;
       } else {
          if (oper == "multiplicar") {
             var res = valor1*valor2;
          } else {
             var res = valor1/valor2;
          }
       }
    }
 
    document.calcform.res.value = res;
 }