How to calculate and display the result of an operation, taking the data of a form, and sending the answer on the same page below the form? [closed]

Question

How to calculate and display the result of an operation, taking the data of a form, and sending the answer on the same page below the form? [closed]

Navigation

#1 by (0 votes)

1

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Calc PHP</title>
</head>
<body>
    <div>
        <form method="post" action="index.php" id="form">
            Valor 1: <input type="number" name="num1" id="v1"><br><br>
            Valor 2: <input type="number" name="num2" id="v2"><br><br>
            <select name="cal" id="campo">
                <option value="add">Somar</option>
                <option value="sub">Subtrair</option>
                <option value="mult">Multiplicar</option>
                <option value="div">Dividir</option>
            </select>
            <button type="button" value="submit"     onclick="mostraResultado()">Calcular</button> 
        </form>  
        <script type="text/javascript">


        function mostraResultado(){
            var form = document.getElementById("form");
            var valor1 = document.getElementById("v1");
            var valor2 = document.getElementById("v2");
            var opcao = document.getElementById("campo");



            switch(opcao){
                case "add":
                    var resultado = valor1.value + valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "sub":
                    var resultado = valor1.value - valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "mult":
                    var resultado = valor1.value * valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "div":
                    var resultado = valor1.value / valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
            }
        }
        </script>
    </div>
</body>
</html>

javascript html

asked by anonymous 20.07.2018 / 16:26

1 answer

Logical Doubt Generation of rounds Laravel How to add Microsoft.ACE.OLEDB.12.0 to the installer of my .NET application?

score 0 · Accepted Answer

Your code has missed some things like grabbing the value of what is being typed and transforming the value into type number.

function mostraResultado(){
    var form = document.getElementById("form"); // acho que não precisa
    var valor1 = document.getElementById("v1").value;  // pega os valores
    var valor2 = document.getElementById("v2").value;
    var opcao = document.getElementById("campo").value;
    var divMostrar = document.getElementById("mostrarResultado");

    switch(opcao){
        case "add":
          var resultado = Number(valor1) + Number(valor2); // altera para number
          divMostrar.textContent = "O resultado é " + resultado; 
        break;
        case "sub":
          var resultado = Number(valor1) - Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
        case "mult":
          var resultado = Number(valor1) * Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
        case "div":
          var resultado = Number(valor1) / Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
     }
         
}

<div>
   <form method="post" id="form">
       Valor 1: <input type="number" name="num1" id="v1"><br><br>
       Valor 2: <input type="number" name="num2" id="v2"><br><br>
       <div id="mostrarResultado"></div>
       <select name="cal" id="campo">
          <option value="add">Somar</option>
          <option value="sub">Subtrair</option>
          <option value="mult">Multiplicar</option>
          <option value="div">Dividir</option>
       </select>
       <button type="button" value="submit"     onclick="mostraResultado()">Calcular</button>
    </form> 
        
</div>