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>
11
  • Qual o erro amigo? Commented 20/07/2018 às 14:37
  • Posta o html tbm.
    – LeAndrade
    Commented 20/07/2018 às 14:42
  • Então, é uma coisa bem simples que eu quero, o form pega os dois valores e escolhe qual operação quer realizar, depois aperta no botão enviar. Até ai tudo bem, mas o problema é que eu quero o mostrar o resultado do cálculo abaixo do botão, tipo "O resultado deu tal". E eu não consigo fazer isso. Ele não aparece nada quando eu aperto no enviar
    – Aly98
    Commented 20/07/2018 às 14:47
  • Ele não vai aparecer porque o seu button é um submit. Troca o type do seu button para button mesmo... <button type="button"... Commented 20/07/2018 às 14:49
  • Eu arrumei isso, mas não aparece nada mesmo assim
    – Aly98
    Commented 20/07/2018 às 14:52

1 Resposta 1

0

Seu código faltou algumas coisas como pegar o valor do que está sendo digitado e transformar o valor em tipo 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>

9
  • Ok, mas ainda não é o resultado que eu queria. Pq eu quero o resultado na mesma página e não em outra. O resultado teria que aparecer embaixo do formulário na mesma página, entende?
    – Aly98
    Commented 20/07/2018 às 18:51
  • Só que como vc quer mostrar o resultado em uma div no próprio form, se a função está no botão de submit do form? Quando apertar o botão Calcular ele vai enviar o form, não vai ter tempo de mostrar nada.
    – LeAndrade
    Commented 20/07/2018 às 18:55
  • O que tá acontecendo é que o script limpa a tela antes de mostrar o resultado. Ou seja, ele apaga o form. Eu quero que não apague o form, e o resultado apareça embaixo do form
    – Aly98
    Commented 20/07/2018 às 19:01
  • Mas é claro que vai limpar, pq como disse a função está associada ao botão que envia o form.
    – LeAndrade
    Commented 20/07/2018 às 19:06
  • Então como eu poderia fazer pra não acontecer isso?
    – Aly98
    Commented 20/07/2018 às 19:13

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .