Error en Calculadora HTML5: TypeError: Cannot set property ‘onclick’ of null

publicado por: Anonymous

Creo que el problema esta en la declaración de variables el código aun no esta completo ya que falta funciones por asignar pero las funciones básicas no me están funcionando ej: suma, resta, multiplicación y divicion. con ellos los números.
PD: tambien puede ser problema con el codigo de la pantalla pero no logro ver el problema, el inspector de chrome me dio este error

Uncaught TypeError: Cannot set property ‘onclick’ of null

at init (Calculadora.js:52)

at onload (N_cal.html?display=8%2B10:8)</B>

_x000D_

_x000D_

var primern;_x000D_
var segundon;_x000D_
var resultado2;_x000D_
function init(){_x000D_
	//tuve que cambiar la forma de declarar las variables porque buscando lei que_x000D_
	//el getElementsClassName es para grupo de vaiables y yo solo tenia una y lo cambie por Id_x000D_
	var pantalla = document.getElementById('pantalla');_x000D_
	var reset = document.getElementById('reset');_x000D_
	var backspace = document.getElementById('backspace');_x000D_
	var porcentaje = document.getElementById('porcentaje');_x000D_
	var divicion = document.getElementById('divicion');_x000D_
	var multiplicacion = document.getElementById('multiplicacion');_x000D_
	var resta = document.getElementById('resta');_x000D_
	var suma = document.getElementById('suma');_x000D_
	var igual = document.getElementById('igual');_x000D_
	var numero1 = document.getElementById('numero1');_x000D_
	var numero2 = document.getElementById('numero2');_x000D_
	var numero3 = document.getElementById('numero3');_x000D_
	var numero4 = document.getElementById('numero4');_x000D_
	var numero5 = document.getElementById('numero5');_x000D_
	var numero6 = document.getElementById('numero6');_x000D_
    var numero7 = document.getElementById('numero7');_x000D_
	var numero8 = document.getElementById('numero8');_x000D_
	var numero9 = document.getElementById('numero9');_x000D_
	var cero = document.getElementById('cero');_x000D_
	var decimal = document.getElementById('decimal');_x000D_
_x000D_
numero1.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "1";_x000D_
	}_x000D_
numero2.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "2";_x000D_
	}_x000D_
numero3.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "3";_x000D_
	}_x000D_
numero4.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "4";_x000D_
	}_x000D_
numero5.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "5";_x000D_
	}_x000D_
numero6.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "6";_x000D_
	}_x000D_
numero7.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "7";_x000D_
	}_x000D_
numero8.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "8";_x000D_
	}_x000D_
numero9.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "9";_x000D_
	}_x000D_
cero.onclick = function(e){_x000D_
		pantalla.textContent = pantalla.textContent + "0";_x000D_
	}_x000D_
reset.onclick = function(e){_x000D_
	recetear();_x000D_
    }_x000D_
suma.onclick = function(e){_x000D_
	primern = pantalla.textContent;_x000D_
	resultado2 = "+";_x000D_
	limpiar();_x000D_
    }_x000D_
    resta.onclick = function(e){_x000D_
    	primern = pantalla.textContent;_x000D_
    	resultado2 = "-";_x000D_
    	limpiar();_x000D_
    }_x000D_
multiplicacion.onclick = function(e){_x000D_
	primern = pantalla.textContent;_x000D_
	resultado2 = "*";_x000D_
	limpiar();_x000D_
    }_x000D_
divicion.onclick = function(e){_x000D_
	primern = pantalla.textContent;_x000D_
	resultado2 = "/";_x000D_
	limpiar();_x000D_
   }_x000D_
igual.onclick = function(e){_x000D_
    segundon = pantalla.textContent;_x000D_
    resolver();_x000D_
}_x000D_
}_x000D_
_x000D_
function limpiar (){_x000D_
	pantalla.textContent = "";_x000D_
}_x000D_
function recetear(){_x000D_
	pantalla.textContent = "";_x000D_
	primern = 0;_x000D_
	segundon = 0;_x000D_
	resultado2 = "";_x000D_
}_x000D_
//esto lo vi en java tube que buscar en mi ordenador donde tenia un ejercicio parecido que tenia._x000D_
function resolver(){_x000D_
	var res = 0;_x000D_
	switch(resultado2){_x000D_
		case "+":_x000D_
		res = parseFloat(primern) + parseFloat(segundon);_x000D_
		break;_x000D_
		case "+":_x000D_
		res = parseFloat(primern) - parseFloat(segundon);_x000D_
		break_x000D_
		case "*":_x000D_
		res = parseFloat(primern) * parseFloat(segundon);_x000D_
		break_x000D_
		case "/":_x000D_
		res = parseFloat(primern) / parseFloat(segundon);_x000D_
		break_x000D_
	}_x000D_
recetear();_x000D_
pantalla.textContent = res;	_x000D_
}

_x000D_

*{_x000D_
	margin:0px;_x000D_
	padding:0px;_x000D_
}_x000D_
.contenedor{_x000D_
	position:relative;_x000D_
	top:125px;_x000D_
	background:black;_x000D_
}_x000D_
.resultado{_x000D_
	font-size:30px;_x000D_
	font-family: Arial,Helvetica;_x000D_
	color:white;_x000D_
	border:0px;_x000D_
	background:black;_x000D_
	width:325.8px;_x000D_
	height:80px;_x000D_
	text-align:right;_x000D_
}_x000D_
.columna1{_x000D_
	font-size:30px;_x000D_
	font-family: Arial,Helvetica;_x000D_
	color:black;_x000D_
	border:0px;_x000D_
	background:#D6CFC9;_x000D_
	width:80px;_x000D_
	height:80px;_x000D_
}_x000D_
.columna2{_x000D_
	font-size:30px;_x000D_
	font-family: Arial,Helvetica;_x000D_
	color:white;_x000D_
	border:0px;_x000D_
	background:#FF821C;_x000D_
	width:80px;_x000D_
	height:80px;_x000D_
}_x000D_
#cero{_x000D_
	width:162px;_x000D_
}_x000D_
.fila{_x000D_
	font-size:30px;_x000D_
	font-family: Arial,Helvetica;_x000D_
	color:black;_x000D_
	border:0px;_x000D_
	background:#C9BDB3;_x000D_
	width:80px;_x000D_
	height:80px;_x000D_
}_x000D_
table{_x000D_
	background:#7E7E7D;_x000D_
}_x000D_
td input:active{_x000D_
	background:#fff;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
	<title>Calculadora</title>_x000D_
</head>_x000D_
<link rel="stylesheet" type="text/css" href="css/estilos.css">_x000D_
_x000D_
<body onload="init();">_x000D_
	<div>_x000D_
		<form>_x000D_
			<table>_x000D_
				<tr>_x000D_
					<td colspan="4"><input class="resultado" id="pantalla" type="text" value=""></td>_x000D_
				</tr>_x000D_
				<tr>_x000D_
					<td><input class="fila" id="reset" type="button" value="AC"></td>_x000D_
					<td><input class="fila" id="backspace" type="button" value="←"></td>_x000D_
					<td><input class="fila" id="porcentaje" type="button" value="%"></td>_x000D_
					<td><input class="columna2" id="divicion" type="button" value="÷"></td>_x000D_
				</tr>_x000D_
				<tr>_x000D_
					<td><input class="columna1" id="numero7" type="button" value="7"></td>_x000D_
					<td><input class="columna1" id="numero8" type="button" value="8"></td>_x000D_
					<td><input class="columna1" id="numero9" type="button" value="9"></td>_x000D_
					<td><input class="columna2" id="multiplicacion" type="button" value="x"></td>_x000D_
					_x000D_
				</tr>_x000D_
				<tr>_x000D_
					<td><input class="columna1" id="numero4" type="button" value="4"></td>_x000D_
					<td><input class="columna1" id="numero5" type="button" value="5"></td>_x000D_
					<td><input class="columna1" id="numero6" type="button" value="6"></td>_x000D_
					<td><input class="columna2" id="resta" type="button" value="-"></td>_x000D_
				</tr>_x000D_
				<tr>_x000D_
					<td><input class="columna1" id="numero1" type="button" value="1"></td>_x000D_
					<td><input class="columna1" id="numero2" type="button" value="2"></td>_x000D_
					<td><input class="columna1" id="numero3" type="button" value="3"></td>_x000D_
					<td><input class="columna2" id="suma" type="button" value="+"></td>_x000D_
				</tr>_x000D_
				<tr>_x000D_
					<td colspan="2"><input class="columna1" id="cero" type="button" value="0"></td>_x000D_
					<td><input class="columna1" id="decimal" type="button" value="."></td>_x000D_
					<td><input class="columna2" id="igual" type="button" value="="></td>_x000D_
					_x000D_
				</tr>_x000D_
			</table>_x000D_
		</form>_x000D_
	<script language="javascript" type="text/javascript" src="js/Calculadora.js"></script>	_x000D_
	</div>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

El problema es que pantalla es un input y entonces no tiene textContent, lo que tiene es value. Si cambias pantalla.textContent por pantalla.value la calculadora ya funciona.

Además, como bien indica Marcos en los comentarios, hay un error para la operación del -:

_x000D_

_x000D_

var primern;_x000D_
var segundon;_x000D_
var resultado2;_x000D_
_x000D_
function init() {_x000D_
  //tuve que cambiar la forma de declarar las variables porque buscando lei que_x000D_
  //el getElementsClassName es para grupo de vaiables y yo solo tenia una y lo cambie por Id_x000D_
  var pantalla = document.getElementById('pantalla');_x000D_
  var reset = document.getElementById('reset');_x000D_
  var backspace = document.getElementById('backspace');_x000D_
  var porcentaje = document.getElementById('porcentaje');_x000D_
  var divicion = document.getElementById('divicion');_x000D_
  var multiplicacion = document.getElementById('multiplicacion');_x000D_
  var resta = document.getElementById('resta');_x000D_
  var suma = document.getElementById('suma');_x000D_
  var igual = document.getElementById('igual');_x000D_
  var numero1 = document.getElementById('numero1');_x000D_
  var numero2 = document.getElementById('numero2');_x000D_
  var numero3 = document.getElementById('numero3');_x000D_
  var numero4 = document.getElementById('numero4');_x000D_
  var numero5 = document.getElementById('numero5');_x000D_
  var numero6 = document.getElementById('numero6');_x000D_
  var numero7 = document.getElementById('numero7');_x000D_
  var numero8 = document.getElementById('numero8');_x000D_
  var numero9 = document.getElementById('numero9');_x000D_
  var cero = document.getElementById('cero');_x000D_
  var decimal = document.getElementById('decimal');_x000D_
_x000D_
  numero1.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "1";_x000D_
  }_x000D_
  numero2.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "2";_x000D_
  }_x000D_
  numero3.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "3";_x000D_
  }_x000D_
  numero4.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "4";_x000D_
  }_x000D_
  numero5.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "5";_x000D_
  }_x000D_
  numero6.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "6";_x000D_
  }_x000D_
  numero7.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "7";_x000D_
  }_x000D_
  numero8.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "8";_x000D_
  }_x000D_
  numero9.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "9";_x000D_
  }_x000D_
  cero.onclick = function(e) {_x000D_
    pantalla.value = pantalla.value + "0";_x000D_
  }_x000D_
  reset.onclick = function(e) {_x000D_
    recetear();_x000D_
  }_x000D_
  suma.onclick = function(e) {_x000D_
    primern = pantalla.value;_x000D_
    resultado2 = "+";_x000D_
    limpiar();_x000D_
  }_x000D_
  resta.onclick = function(e) {_x000D_
    primern = pantalla.value;_x000D_
    resultado2 = "-";_x000D_
    limpiar();_x000D_
  }_x000D_
  multiplicacion.onclick = function(e) {_x000D_
    primern = pantalla.value;_x000D_
    resultado2 = "*";_x000D_
    limpiar();_x000D_
  }_x000D_
  divicion.onclick = function(e) {_x000D_
    primern = pantalla.value;_x000D_
    resultado2 = "/";_x000D_
    limpiar();_x000D_
  }_x000D_
  igual.onclick = function(e) {_x000D_
    segundon = pantalla.value;_x000D_
    resolver();_x000D_
  }_x000D_
}_x000D_
_x000D_
function limpiar() {_x000D_
  pantalla.value = "";_x000D_
}_x000D_
_x000D_
function recetear() {_x000D_
  pantalla.value = "";_x000D_
  primern = 0;_x000D_
  segundon = 0;_x000D_
  resultado2 = "";_x000D_
}_x000D_
//esto lo vi en java tube que buscar en mi ordenador donde tenia un ejercicio parecido que tenia._x000D_
function resolver() {_x000D_
  var res = 0;_x000D_
  switch (resultado2) {_x000D_
    case "+":_x000D_
      res = parseFloat(primern) + parseFloat(segundon);_x000D_
      break;_x000D_
    case "-":_x000D_
      res = parseFloat(primern) - parseFloat(segundon);_x000D_
      break_x000D_
    case "*":_x000D_
      res = parseFloat(primern) * parseFloat(segundon);_x000D_
      break_x000D_
    case "/":_x000D_
      res = parseFloat(primern) / parseFloat(segundon);_x000D_
      break_x000D_
  }_x000D_
  recetear();_x000D_
  pantalla.value = res;_x000D_
}

_x000D_

* {_x000D_
  margin: 0px;_x000D_
  padding: 0px;_x000D_
}_x000D_
_x000D_
.contenedor {_x000D_
  position: relative;_x000D_
  top: 125px;_x000D_
  background: black;_x000D_
}_x000D_
_x000D_
.resultado {_x000D_
  font-size: 30px;_x000D_
  font-family: Arial, Helvetica;_x000D_
  color: white;_x000D_
  border: 0px;_x000D_
  background: black;_x000D_
  width: 325.8px;_x000D_
  height: 80px;_x000D_
  text-align: right;_x000D_
}_x000D_
_x000D_
.columna1 {_x000D_
  font-size: 30px;_x000D_
  font-family: Arial, Helvetica;_x000D_
  color: black;_x000D_
  border: 0px;_x000D_
  background: #D6CFC9;_x000D_
  width: 80px;_x000D_
  height: 80px;_x000D_
}_x000D_
_x000D_
.columna2 {_x000D_
  font-size: 30px;_x000D_
  font-family: Arial, Helvetica;_x000D_
  color: white;_x000D_
  border: 0px;_x000D_
  background: #FF821C;_x000D_
  width: 80px;_x000D_
  height: 80px;_x000D_
}_x000D_
_x000D_
#cero {_x000D_
  width: 162px;_x000D_
}_x000D_
_x000D_
.fila {_x000D_
  font-size: 30px;_x000D_
  font-family: Arial, Helvetica;_x000D_
  color: black;_x000D_
  border: 0px;_x000D_
  background: #C9BDB3;_x000D_
  width: 80px;_x000D_
  height: 80px;_x000D_
}_x000D_
_x000D_
table {_x000D_
  background: #7E7E7D;_x000D_
}_x000D_
_x000D_
td input:active {_x000D_
  background: #fff;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <title>Calculadora</title>_x000D_
</head>_x000D_
<link rel="stylesheet" type="text/css" href="css/estilos.css">_x000D_
_x000D_
<body onload="init();">_x000D_
  <div>_x000D_
    <form>_x000D_
      <table>_x000D_
        <tr>_x000D_
          <td colspan="4"><input class="resultado" id="pantalla" type="text" value=""></td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td><input class="fila" id="reset" type="button" value="AC"></td>_x000D_
          <td><input class="fila" id="backspace" type="button" value="←"></td>_x000D_
          <td><input class="fila" id="porcentaje" type="button" value="%"></td>_x000D_
          <td><input class="columna2" id="divicion" type="button" value="÷"></td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td><input class="columna1" id="numero7" type="button" value="7"></td>_x000D_
          <td><input class="columna1" id="numero8" type="button" value="8"></td>_x000D_
          <td><input class="columna1" id="numero9" type="button" value="9"></td>_x000D_
          <td><input class="columna2" id="multiplicacion" type="button" value="x"></td>_x000D_
_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td><input class="columna1" id="numero4" type="button" value="4"></td>_x000D_
          <td><input class="columna1" id="numero5" type="button" value="5"></td>_x000D_
          <td><input class="columna1" id="numero6" type="button" value="6"></td>_x000D_
          <td><input class="columna2" id="resta" type="button" value="-"></td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td><input class="columna1" id="numero1" type="button" value="1"></td>_x000D_
          <td><input class="columna1" id="numero2" type="button" value="2"></td>_x000D_
          <td><input class="columna1" id="numero3" type="button" value="3"></td>_x000D_
          <td><input class="columna2" id="suma" type="button" value="+"></td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td colspan="2"><input class="columna1" id="cero" type="button" value="0"></td>_x000D_
          <td><input class="columna1" id="decimal" type="button" value="."></td>_x000D_
          <td><input class="columna2" id="igual" type="button" value="="></td>_x000D_
_x000D_
        </tr>_x000D_
      </table>_x000D_
    </form>_x000D_
    <script language="javascript" type="text/javascript" src="js/Calculadora.js"></script>_x000D_
  </div>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *