Error in HTML5 Calculator: TypeError: Can not set property 'onclick' of null

Question

Error in HTML5 Calculator: TypeError: Can not set property 'onclick' of null

Navigation

#1 by (5 votes)

1

I think the problem is in the declaration of variables the code is not yet complete because it lacks functions to assign but the basic functions are not working for me: addition, subtraction, multiplication and division. with them the numbers. PS: it may also be a problem with the screen code but I can not see the problem, the chrome inspector gave me this error.

Uncaught TypeError: Can not set property 'onclick' of null
at init (Calculadora.js:52)

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

var primern;
var segundon;
var resultado2;
function init(){
	//tuve que cambiar la forma de declarar las variables porque buscando lei que
	//el getElementsClassName es para grupo de vaiables y yo solo tenia una y lo cambie por Id
	var pantalla = document.getElementById('pantalla');
	var reset = document.getElementById('reset');
	var backspace = document.getElementById('backspace');
	var porcentaje = document.getElementById('porcentaje');
	var divicion = document.getElementById('divicion');
	var multiplicacion = document.getElementById('multiplicacion');
	var resta = document.getElementById('resta');
	var suma = document.getElementById('suma');
	var igual = document.getElementById('igual');
	var numero1 = document.getElementById('numero1');
	var numero2 = document.getElementById('numero2');
	var numero3 = document.getElementById('numero3');
	var numero4 = document.getElementById('numero4');
	var numero5 = document.getElementById('numero5');
	var numero6 = document.getElementById('numero6');
    var numero7 = document.getElementById('numero7');
	var numero8 = document.getElementById('numero8');
	var numero9 = document.getElementById('numero9');
	var cero = document.getElementById('cero');
	var decimal = document.getElementById('decimal');

numero1.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "1";
	}
numero2.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "2";
	}
numero3.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "3";
	}
numero4.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "4";
	}
numero5.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "5";
	}
numero6.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "6";
	}
numero7.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "7";
	}
numero8.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "8";
	}
numero9.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "9";
	}
cero.onclick = function(e){
		pantalla.textContent = pantalla.textContent + "0";
	}
reset.onclick = function(e){
	recetear();
    }
suma.onclick = function(e){
	primern = pantalla.textContent;
	resultado2 = "+";
	limpiar();
    }
    resta.onclick = function(e){
    	primern = pantalla.textContent;
    	resultado2 = "-";
    	limpiar();
    }
multiplicacion.onclick = function(e){
	primern = pantalla.textContent;
	resultado2 = "*";
	limpiar();
    }
divicion.onclick = function(e){
	primern = pantalla.textContent;
	resultado2 = "/";
	limpiar();
   }
igual.onclick = function(e){
    segundon = pantalla.textContent;
    resolver();
}
}

function limpiar (){
	pantalla.textContent = "";
}
function recetear(){
	pantalla.textContent = "";
	primern = 0;
	segundon = 0;
	resultado2 = "";
}
//esto lo vi en java tube que buscar en mi ordenador donde tenia un ejercicio parecido que tenia.
function resolver(){
	var res = 0;
	switch(resultado2){
		case "+":
		res = parseFloat(primern) + parseFloat(segundon);
		break;
		case "+":
		res = parseFloat(primern) - parseFloat(segundon);
		break
		case "*":
		res = parseFloat(primern) * parseFloat(segundon);
		break
		case "/":
		res = parseFloat(primern) / parseFloat(segundon);
		break
	}
recetear();
pantalla.textContent = res;	
}

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

<!DOCTYPE html>
<html>
<head>
	<title>Calculadora</title>
</head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">

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

javascript html5 css3

asked by Ralph Ortega 21.02.2018 в 20:58

source

1 answer

Apply CSS to array of objects in JSON Repeat a print certain times in a while

score 5 · Accepted Answer

The problem is that screen is a input and then it does not have textContent , what it has is value . If you change pantalla.textContent by pantalla.value the calculator already works.

Also, as indicated by Marcos in the comments, there is an error for the operation of - :

var primern;
var segundon;
var resultado2;

function init() {
  //tuve que cambiar la forma de declarar las variables porque buscando lei que
  //el getElementsClassName es para grupo de vaiables y yo solo tenia una y lo cambie por Id
  var pantalla = document.getElementById('pantalla');
  var reset = document.getElementById('reset');
  var backspace = document.getElementById('backspace');
  var porcentaje = document.getElementById('porcentaje');
  var divicion = document.getElementById('divicion');
  var multiplicacion = document.getElementById('multiplicacion');
  var resta = document.getElementById('resta');
  var suma = document.getElementById('suma');
  var igual = document.getElementById('igual');
  var numero1 = document.getElementById('numero1');
  var numero2 = document.getElementById('numero2');
  var numero3 = document.getElementById('numero3');
  var numero4 = document.getElementById('numero4');
  var numero5 = document.getElementById('numero5');
  var numero6 = document.getElementById('numero6');
  var numero7 = document.getElementById('numero7');
  var numero8 = document.getElementById('numero8');
  var numero9 = document.getElementById('numero9');
  var cero = document.getElementById('cero');
  var decimal = document.getElementById('decimal');

  numero1.onclick = function(e) {
    pantalla.value = pantalla.value + "1";
  }
  numero2.onclick = function(e) {
    pantalla.value = pantalla.value + "2";
  }
  numero3.onclick = function(e) {
    pantalla.value = pantalla.value + "3";
  }
  numero4.onclick = function(e) {
    pantalla.value = pantalla.value + "4";
  }
  numero5.onclick = function(e) {
    pantalla.value = pantalla.value + "5";
  }
  numero6.onclick = function(e) {
    pantalla.value = pantalla.value + "6";
  }
  numero7.onclick = function(e) {
    pantalla.value = pantalla.value + "7";
  }
  numero8.onclick = function(e) {
    pantalla.value = pantalla.value + "8";
  }
  numero9.onclick = function(e) {
    pantalla.value = pantalla.value + "9";
  }
  cero.onclick = function(e) {
    pantalla.value = pantalla.value + "0";
  }
  reset.onclick = function(e) {
    recetear();
  }
  suma.onclick = function(e) {
    primern = pantalla.value;
    resultado2 = "+";
    limpiar();
  }
  resta.onclick = function(e) {
    primern = pantalla.value;
    resultado2 = "-";
    limpiar();
  }
  multiplicacion.onclick = function(e) {
    primern = pantalla.value;
    resultado2 = "*";
    limpiar();
  }
  divicion.onclick = function(e) {
    primern = pantalla.value;
    resultado2 = "/";
    limpiar();
  }
  igual.onclick = function(e) {
    segundon = pantalla.value;
    resolver();
  }
}

function limpiar() {
  pantalla.value = "";
}

function recetear() {
  pantalla.value = "";
  primern = 0;
  segundon = 0;
  resultado2 = "";
}
//esto lo vi en java tube que buscar en mi ordenador donde tenia un ejercicio parecido que tenia.
function resolver() {
  var res = 0;
  switch (resultado2) {
    case "+":
      res = parseFloat(primern) + parseFloat(segundon);
      break;
    case "-":
      res = parseFloat(primern) - parseFloat(segundon);
      break
    case "*":
      res = parseFloat(primern) * parseFloat(segundon);
      break
    case "/":
      res = parseFloat(primern) / parseFloat(segundon);
      break
  }
  recetear();
  pantalla.value = res;
}

* {
  margin: 0px;
  padding: 0px;
}

.contenedor {
  position: relative;
  top: 125px;
  background: black;
}

.resultado {
  font-size: 30px;
  font-family: Arial, Helvetica;
  color: white;
  border: 0px;
  background: black;
  width: 325.8px;
  height: 80px;
  text-align: right;
}

.columna1 {
  font-size: 30px;
  font-family: Arial, Helvetica;
  color: black;
  border: 0px;
  background: #D6CFC9;
  width: 80px;
  height: 80px;
}

.columna2 {
  font-size: 30px;
  font-family: Arial, Helvetica;
  color: white;
  border: 0px;
  background: #FF821C;
  width: 80px;
  height: 80px;
}

#cero {
  width: 162px;
}

.fila {
  font-size: 30px;
  font-family: Arial, Helvetica;
  color: black;
  border: 0px;
  background: #C9BDB3;
  width: 80px;
  height: 80px;
}

table {
  background: #7E7E7D;
}

td input:active {
  background: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <title>Calculadora</title>
</head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">

<body onload="init();">
  <div>
    <form>
      <table>
        <tr>
          <td colspan="4"><input class="resultado" id="pantalla" type="text" value=""></td>
        </tr>
        <tr>
          <td><input class="fila" id="reset" type="button" value="AC"></td>
          <td><input class="fila" id="backspace" type="button" value="←"></td>
          <td><input class="fila" id="porcentaje" type="button" value="%"></td>
          <td><input class="columna2" id="divicion" type="button" value="÷"></td>
        </tr>
        <tr>
          <td><input class="columna1" id="numero7" type="button" value="7"></td>
          <td><input class="columna1" id="numero8" type="button" value="8"></td>
          <td><input class="columna1" id="numero9" type="button" value="9"></td>
          <td><input class="columna2" id="multiplicacion" type="button" value="x"></td>

        </tr>
        <tr>
          <td><input class="columna1" id="numero4" type="button" value="4"></td>
          <td><input class="columna1" id="numero5" type="button" value="5"></td>
          <td><input class="columna1" id="numero6" type="button" value="6"></td>
          <td><input class="columna2" id="resta" type="button" value="-"></td>
        </tr>
        <tr>
          <td><input class="columna1" id="numero1" type="button" value="1"></td>
          <td><input class="columna1" id="numero2" type="button" value="2"></td>
          <td><input class="columna1" id="numero3" type="button" value="3"></td>
          <td><input class="columna2" id="suma" type="button" value="+"></td>
        </tr>
        <tr>
          <td colspan="2"><input class="columna1" id="cero" type="button" value="0"></td>
          <td><input class="columna1" id="decimal" type="button" value="."></td>
          <td><input class="columna2" id="igual" type="button" value="="></td>

        </tr>
      </table>
    </form>
    <script language="javascript" type="text/javascript" src="js/Calculadora.js"></script>
  </div>
</body>

</html>