Oi boa tarde, gente to com uma duvida
Esse é o código que montei de calculadora ( eu tive que faze-la apenas usando funções e metodos), eu adicionei as funções basicas, porem queria colocar o botão decimal, e o botão de backspace, porem o unico jeito que achei foi usando document.getElementById('...').addEventListener('click', ...)
, só que quando uso esse metodo, ele me retorna um erro por conta do addEventListener
Meu código está assim o js dele:
//Função que adiciona os numeros no visor quando pressionado os botões
function calculaNumero(numero){
if(typeof gvisor == 'undefined'){
document.calcform.visor.value = '';
}
document.calcform.visor.value = document.calcform.visor.value + numero;
gvisor = 1;
}
//Função que limpa o visor da Calculadora
function calcLimpar () {
document.calcform.visor.value = '';
delete gvalor;
delete goper;
delete gvisor;
}
//Funções Matemáticas
function calculaOperador (oper, valor1, valor2){
if(oper == "somar"){
var valor = parseFloat(valor1) + parseFloat(valor2);
}else{
if(oper == "subtrair"){
var valor = valor1 - valor2;
}else{
if(oper == "multiplicar"){
var valor = valor1*valor2;
}else{
if( oper == "dividir" && valor2 == 0){
var valor = document.calcform.visor.value = 'Math Error';
}else{
var valor = valor1 / valor2;
}
}
}
}
return(valor);
}
//Função do algoritmo de transição das açoes do usuário
function calcParse(oper){
var valor = document.calcform.visor.value;
delete gvisor;
if (typeof goper != 'undefined' && oper == 'resultado'){
gvalor = calculaOperador(goper, gvalor, valor);
goper = oper;
document.calcform.visor.value = gvalor;
}else{
gvalor = valor;
goper = oper;
}
}
o html dele está assim:
<!DOCTYPE html>
<html lang="pt-BR" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora operacional - Bruno </title>
<link rel="stylesheet" href="style.css">
<script src="calculadora.js"></script>
</head>
<body>
<div class="fundo">
<form name="calcform" method="post" action="">
<fieldset class="alinhamento">
<legend></legend>
<input type="text" name="visor" id="visor" />
<table id="calc" class="calculadora">
<tr>
<td><input type="button" name="num9" class="numero" value="9" onclick="calculaNumero(9)" /></td>
<td><input type="button" name="num8" class="numero" value="8" onclick="calculaNumero(8)" /></td>
<td><input type="button" name="num7" class="numero" value="7" onclick="calculaNumero(7)" /></td>
<td><input type="button" name="somar" class="oper" value="+" onclick="calcParse('somar')"/></td>
</tr>
<tr>
<td><input type="button" name="num6" class="numero" value="6" onclick="calculaNumero(6)" /></td>
<td><input type="button" name="num5" class="numero" value="5" onclick="calculaNumero(5)" /></td>
<td><input type="button" name="num4" class="numero" value="4" onclick="calculaNumero(4)" /></td>
<td><input type="button" name="subtrair" class="oper" value="-" onclick="calcParse('subtrair')" /></td>
</tr>
<tr>
<td><input type="button" name="num3" class="numero" value="3" onclick="calculaNumero(3)" /></td>
<td><input type="button" name="num2" class="numero" value="2" onclick="calculaNumero(2)" /></td>
<td><input type="button" name="num1" class="numero" value="1" onclick="calculaNumero(1)" /></td>
<td><input type="button" name="multiplicar" class="oper" value="*" onclick="calcParse('multiplicar')" /></td>
</tr>
<tr>
<td><input type="button" name="num0" class="numero" value="0" onclick="calculaNumero(0)" /></td>
<td><input type="button" name="igual" class="numero" value="=" onclick="calcParse('resultado')" /></td>
<td><input type="button" name="limpar" class="numero" value="AC" onclick="calcLimpar()" /></td>
<td><input type="button" name="dividir" class="oper" value="/" onclick="calcParse('dividir')" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>