Stack Overflow em Português Asked by ash on December 2, 2020
Se colocar número nos inputs e escolher a operação, deveria sair o resultado em um alert. Porém o alert não está funcionando.
let botao = document.getElementsByClassName('mybutton')
botao.onclick = function(){
let num1 = Number(document.getElementById('num1').value)
let num2 = Number(document.getElementById('num2').value)
let oper = document.getElementById('oper')
let resultado = 0
if(oper === '+'){
resultado = num1 + num2
alert(resultado)
}else if(oper === '-'){
resultado = num1 - num2
alert(resultado)
}else if( oper === '/'){
resultado = num1 / num2
alert(resultado)
}else{
resultado = num1*num2
alert(resultado)
}
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Calculadora em javascript</title>
</head>
<body>
<h1>Calculadora</h1>
<form>
<input type="text" placeholder="Digite o primeiro numero" id="num1">
<input type="text" placeholder="Digite o segundo numero" id="num2">
<input type="text" placeholder= "Digite a operação + - / * " id="oper">
<button class="mybutton"> Calcular </button>
</form>
</body>
</html>
getElementsByClassName retorna uma lista de elementos (note que o nome é getElements, no plural).
Então você deveria pegar somente o primeiro da lista para ter o botão (como só tem um, não tem problema fazer assim):
// pega o primeiro elemento da lista retornada por getElementsByClassName
let botao = document.getElementsByClassName('mybutton')[0];
botao.onclick = function(e){
let num1 = Number(document.getElementById('num1').value);
let num2 = Number(document.getElementById('num2').value);
let oper = document.getElementById('oper').value;
if (oper === '+'){
alert(num1 + num2);
} else if(oper === '-'){
alert(num1 - num2);
} else if( oper === '/'){
alert(num1 / num2);
} else if (oper === '*') {
alert(num1 * num2);
} else {
alert('operação inválida');
}
e.preventDefault();
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Calculadora em javascript</title>
</head>
<body>
<h1>Calculadora</h1>
<form>
<input type="text" placeholder="Digite o primeiro numero" id="num1">
<input type="text" placeholder="Digite o segundo numero" id="num2">
<input type="text" placeholder= "Digite a operação + - / * " id="oper">
<button class="mybutton"> Calcular </button>
</form>
</body>
</html>Repare também que para a operação você não estava pegando o value, então você estava comparando o input (e não o valor dele) com +, -, etc - e ele caía no último else, ou seja, sempre fazia a multiplicação. Usando o value e colocando um if a mais, fica melhor, pois agora ele valida todas as operações ou dá uma mensagem em caso de operação inválida.
E também usei preventDefault para evitar que o form seja submetido e os dados da página "sumam" ao clicar no botão.
Claro que outra opção seria o botão ter um id:
<button id="mybutton"> Calcular </button>
Aí você poderia fazer:
document.getElementById('mybutton').onclick = function () { etc...
Pois id's devem ser únicos em uma página, e getElementById retorna um único elemento.
Answered by hkotsubo on December 2, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP