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

Question

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

closed . This question needs details or to be clearer and is not currently accepting answers.

want to improve this question? Add details and make it clearer what problem is being solved by editing this post .

Closed 2 years ago .

<!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>

1

html javascript formulário

Author: Aly98, 2018-07-20

Source

1 answers

score 0 · Accepted Answer

Your Code missed a few things like taking the value of what is being typed and turning 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>