Outro Erro em comandos com Document.getElementById

Taikaikai · 31 de março de 2021

Ola pessoal sou iniciante em programação e estou treinando HTMl porém estou tendo um problema que não sei como resolver que são erros relacionados ao comando "Document.getElementById" toda vez que uso o mesmo ele nunca é executado, sempre da algum tipo de erro, isso eu vendo video e codigos e copiando letra por letra e não consigo achar solução. Nesse codigo abaixo é uma calculadora (bem simples) onde o botão "=" não funciona e mostra um erro no console:

<!DOCTYPE html>
<html>
   <head>
 <meta charset="utf-8">
 <title> Calculadora</title>
   </head>
    <body>		
    	<form>
    		<table border="0">
    			<tr>
    				<th colspan="5"> Calculadora </th>    			    
    			</tr>
    			<tr>
    				<td>val1 <input type="text" name="val1" id="val1"></td>
    				<td> 

    					<select name="sinal" id="sinal"> 
    						<option value="+">+</option>
    						<option value="-">-</option>
    						<option value="*">*</option>
    						<option value="/">/</option>
    					</select> 	

    				</td>
    				<td> val2 <input type="text" name="val2" id="val2"></td>
    				<td> <input type="button" value="=" onclick="calcular();" name=""></td>
    				<td> <input type="text" name="result" id="result"></td>
    			</tr>

    		</table>
    	</form>
  <script type="text/javascript">

  	function calcular(){
  		let val1  = parseInt(document.getElementById("val1").value);
  		let val2  = parseInt(document.getElementById("val2 ").value);
  		let sinal = document.getElementById("sinal").value;	
  		let result = document.getElementById("result");

  		if(sinal == "+") result.value = val1 + val2;

  		

  		
  	}
  	
  </script>
  
  </body>
  </html>

se alguem souber onde esta o Erro pfv me ajude ja fiquei 30 min mexendo e sempre da a mesmo coisa, obrigado.

Marcelo Calazans · 1 de abril de 2021

@Taikaikai Olá colega.

Acertei o seu código para funcionar apenas com a operação de adição, agora você precisa fazer as demais:

<!DOCTYPE html>
<html>
   <head>
 <meta charset="utf-8">
 <title> Calculadora</title>
   </head>
    <body>		
    	<form>
    		<table border="0">
    			<tr>
    				<th colspan="5"> Calculadora </th>    			    
    			</tr>
    			<tr>
    				<td>val1 <input type="text" name="val1" id="val1"></td>
    				<td> 

    					<select name="sinal" id="sinal"> 
    						<option value="+">+</option>
    						<option value="-">-</option>
    						<option value="*">*</option>
    						<option value="/">/</option>
    					</select> 	

    				</td>
    				<td> val2 <input type="text" name="val2" id="val2"></td>
    				<td> <input type="button" value="=" onclick="calcular();" name=""></td>
    				<td> <input type="text" name="result" id="result"></td>
    			</tr>

    		</table>
    	</form>
  <script type="text/javascript">

  	function calcular() {
  		let val1  = parseInt(document.getElementById("val1").value);
  		let val2  = parseInt(document.getElementById("val2").value);
  		let sinal = document.getElementById("sinal").value;	

  		if(sinal == "+") { resultado = val1 + val2;};
        
        document.getElementById("result").value = resultado;
  	}
  	
  </script>
  
  </body>
  
  </html>