Ayuda con una calculadora en javascript
Hola que tal companeros, estoy trabajando en una tarea, es una calculadora en javascript, y queria saber si me podian ayudar con lo de los signos de las operaciones, mi problema es que no puedo modificar el html "es parte de la tarea" eso me dificulta las cosas, queria saber si tenian algun consejo u idea, ya tengo adelantado el trabajo, pero en esta parte estoy bloqueado, el metodo que estoy utilizando sirve para los numeros pero no para los signos de operaciones.
Muchas gracias!!
este es el html
Código:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<title>Calculadora</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="fondo">
<div class="titulo-container">
<h1>¡No pierdas <span>la cuenta!</span></h1>
</div>
<div class="notas-container">
<h2>Tus apuntes...</h2>
<textarea class="nota-input" placeholder="Escribe aquí..."></textarea>
</div>
<div id="calculadoraFondo">
<div class="pantalla">
<span id="display"></span>
</div>
<div class="teclado">
<img src="image/ON.png" alt="On" class="tecla" id="on"/>
<img src="image/sign.png" alt="signo" class="tecla" id="sign"/>
<img src="image/raiz.png" alt="raiz" class="tecla" id="raiz"/>
<img src="image/dividido.png" alt="/" class="tecla divide" id="dividido"/>
<img src="image/7.png" alt="7" class="tecla" id="7" />
<img src="image/8.png" alt="8" class="tecla" id="8" />
<img src="image/9.png" alt="9" class="tecla" id="9" />
<img src="image/por.png" alt="por" class="tecla multiplica" id="por" />
<img src="image/4.png" alt="4" class="tecla" id="4" />
<img src="image/5.png" alt="5" class="tecla" id="5" />
<img src="image/6.png" alt="6" class="tecla" id="6" />
<img src="image/menos.png" alt="menos" class="tecla resta" id="menos" />
<div class="row">
<div class="col1">
<img src="image/1.png" alt="1" class="operaciones" id="1" />
<img src="image/2.png" alt="2" class="tecla" id="2" />
<img src="image/3.png" alt="3" class="tecla" id="3" />
<img src="image/0.png" alt="0" class="tecla" id="0" />
<img src="image/punto.png" alt="punto" class="tecla" id="punto"/>
<img src="image/igual.png" alt="=" class="tecla" id="igual"/>
</div>
<div class="col2">
<img src="image/mas.png" alt="mas" class="tecla suma" id="mas"/>
</div>
</div>
</div>
</div>
<div class="container-libreta">
<div class="libreta">
<div class="contenido-ingresos">
<h3>Ingresos</h3>
<ul>
<li><span>Salario: </span>$1300.00</li>
<li><span>Bonificación: </span>$200.00</li>
</ul>
</div>
<div class="contenido-egresos">
<h3>Egresos</h3>
<ul>
<li><span>Renta: </span>$300.00</li>
<li><span>Alimentos: </span>$250.00</li>
<li><span>Restaurantes: </span>$120.00</li>
<li><span>Automóvil: </span>$100.00</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
Código:
var numero = 0;var numeros = document.querySelectorAll("img");
for (var i = 0; i < numeros.length; i++) {
numeros[i].onclick = add;
}
function add(e) {
e.stopPropagation()
//alert(this.getAttribute("alt"));
var pantalla = document.getElementById("display");
var addigit = pantalla;
numero = e.innerHTML;
addigit.textContent += this.getAttribute("alt");
document.getElementById("on").onclick = function(){
display.innerHTML = 0;
}
}
