Saludo! estoy tratando de hacer una calculadora con JavaScript y no puedo saber porque cuando presiono el boton 1 para que aparezca en el input, no lo hace me marca un error del textContent.
Este es mi código, espero que me puedan ayudar estoy, si el método del textContent no es el correcto.
Y en la consola me arroja que el TextContent no esta definido, es que estoy aprendiendo y me propuse hacer una calculadora, pero no se como poner el numero en el input.
Gracias! espero que puedan resolver mi duda, se lo agradecería mucho
function init() {
// Declaracion de variables
var cero = document.getElementById('0');
var uno = document.getElementById('uno');
var dos = document.getElementById('2');
var tres = document.getElementById('3');
var cuatro = document.getElementById('4');
var cinco = document.getElementById('5');
var seis = document.getElementById('6');
var siete = document.getElementById('7');
var ocho = document.getElementById('8');
var nueve = document.getElementById('9');
var igual = document.getElementById('igual');
var borrar = document.getElementById('Borrar');
var division = document.getElementById('division');
var multiplicacion = document.getElementById('multiplicacion');
var menos = document.getElementById('menos');
var mas = document.getElementById('mas');
var resultado = document.getElementById('resultado');
uno.onclick = function(e) {
resultado.textContent = textContent + "1";
}
}
.formu {
margin: 40px;
width: 175px;
background-color: black;
height: 165px;
}
.cero {
width: 80px;
}
.td {
width: 40px;
}
.igual {
width: 40px;
}
.resultado {
width: 165px;
text-align: right;
background-color: #000;
border-color: #0d8aff;
color: white;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body onload="init();">
<form class="formu">
<table>
<thead>
<input type="text" class="resultado" id="resultado">
</thead>
<tbody>
<tr>
<td>
<button id="Borrar" class="td">C</button><button id="division" class="td">/</button><button id="multiplicacion" class="td">*</button><button id="menos" class="td">-</button>
</td>
</tr>
<tr>
<td>
<button id="7" class="td">7</button><button id="8" class="td">8</button><button id="9" class="td">9</button><button id="mas" class="td">+</button>
</td>
</tr>
<tr>
<td>
<button id="4" class="td">4</button><button id="5" class="td">5</button><button id="6" class="td">6</button>
</td>
</tr>
<tr>
<td>
<button id="uno" class="td">1</button><button id="2" class="td">2</button><button id="3" class="td">3</button>
</td>
</tr>
<tr>
<td>
<button id="0" class="cero">0</button><button id="igual" class="igual">=</button>
</td>
</tr>
</tbody>
</table>
</form>
<script src="index.js"></script>
</body>
</html>
resultado.textContent = textContent + "1";
, en esta parte estas obteniendo la propiedadtextContent
de resultado, pero después del igual estas usando una variable que no existe, tan solo usa lo mismo que antesresultado.textContent = resultado.textContent + "1";
input
tienes que usar la propiedadvalue
, notextContent
que es para elementos como<p>, <span>, <div>
, etc.textContent
de cada<td>