1

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>

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>

4
  • No se ve el error que comentas.
    – Alvaro Montoro
    Commented el 21 feb. 2018 a las 20:26
  • El error lo muestra google chrome cuando le doy a inspeccionar elemento, pero fuera de eso ¿por que no funciona? Commented el 21 feb. 2018 a las 20:31
  • Deberian de aparecer los numeros que escribes en "la pantalla" o solo debe de aparecer el resultado?
    – Alvarez
    Commented el 21 feb. 2018 a las 20:33
  • Tanto números como resultados principales. Commented el 21 feb. 2018 a las 20:36

1 respuesta 1

5

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 -:

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>

1
  • Muchas gracias la verdad es que soy nuevo ahora tendre que estudiar este error muchas gracias hermano eres un crack. Commented el 21 feb. 2018 a las 20:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.