<!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>
-
Qual o erro amigo?– Maycon F. CastroCommented 20/07/2018 às 14:37
-
Posta o html tbm.– LeAndradeCommented 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– Aly98Commented 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"...– André Luis MarmoCommented 20/07/2018 às 14:49
-
Eu arrumei isso, mas não aparece nada mesmo assim– Aly98Commented 20/07/2018 às 14:52
|
Mostrar mais 6 comentários
1 Resposta
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>
-
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?– Aly98Commented 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. 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– Aly98Commented 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. Commented 20/07/2018 às 19:06
-