1

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>

4
  • resultado.textContent = textContent + "1";, en esta parte estas obteniendo la propiedad textContent de resultado, pero después del igual estas usando una variable que no existe, tan solo usa lo mismo que antes resultado.textContent = resultado.textContent + "1";
    – 404
    Commented el 15 abr. 2021 a las 21:34
  • Para cambiar los datos en un input tienes que usar la propiedad value , no textContent que es para elementos como <p>, <span>, <div>, etc.
    – A. Cedano
    Commented el 15 abr. 2021 a las 22:20
  • @A.Cedano Gracias, me ayudo, ando aprendiendo y cosas asi me ponen claro
    – Jonathan
    Commented el 15 abr. 2021 a las 22:25
  • Y, no deberías asignar un listener por cada número ni tampoco crear un elemento por cada número, puedes agregar un mismo listener a todos y sacar el número de su id (aunque no es recomendado dar ids con sólo números) deberías evitar eso. En ese caso podrías tomar el valor del textContent de cada <td>
    – A. Cedano
    Commented el 15 abr. 2021 a las 22:29

1 respuesta 1

1

El elemento que quieres cambiar es un input, y la propiedad para establecer el valor de un input es value. En cambio, textContent sirve para cambiar el contenido de texto, por decirlo de alguna forma, el texto que va por fuera de elementos como <p>Esto es textContent</p>, <span>Esto es textContent</span>, <td>Esto es textContent</td>, etc.

Por otra parte veo que tu código va por mal camino. No hay necesidad de crear referencias a cada número ni de crear funciones para sumar cada número. Tú puedes asignar una misma clase a los botones de números y luego escuchar los clicks de esos botones y obtener el valor de cualquiera que haya sido pulsado. Para tales fines he asignado una clase number a los botones que son números.

He aquí un ejemplo, dado que es una mala práctica asignar ids con sólo números, también he cambiado los id por la propiedad value en cada botón, luego usaremos esa propiedad con e.target para saber el botón que fue pulsado. Con este poco de código escuchamos el click de cualquiera de los números, podemos saber su valor y operar con él.

Aquí hago solamente operación de suma, la cuestión de las operaciones la puedes simplificar también de este modo. Pero eso debería ser parte de tu aprendizaje.

function init() {
  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');

  /*Seleccionamos TODOS los botones con la clase number*/
  var allNumbers = document.querySelectorAll('button.number');

  /*Asignamos un listener a todos ellos al mismo tiempo, eso evitará tener una función para cada número como parecía que querías hacer*/
  allNumbers.forEach(function(element) {
    element.addEventListener("click", function(e) {
      e.preventDefault();
      /*Es mejor parsear y guardar una referencia, aquí lo hago a entero por simplicidad, debes mejorar para las divisiones*/
      var mVal = parseInt(resultado.value) || 0;
      /*OJO aquí, el valor se obtiene usando e.target, por eso podemos prescindir de todas las variables declaradas a mano como las tenías antes*/
      resultado.value = mVal + parseInt(e.target.value);

    });
  });

}
.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 value="7" class="number td">7</button><button value="8" class="number td">8</button><button value="9" class="number td">9</button><button value="mas" class="td">+</button></td>
        </tr>
        <tr>
          <td>
            <button value="4" class="number td">4</button><button value="5" class="number td">5</button><button value="6" class="number td">6</button>
          </td>
        </tr>
        <tr>
          <td>
            <button value="1" class="number td">1</button><button value="2" class="number td">2</button><button value="3" class="number td">3</button>
          </td>
        </tr>
        <tr>
          <td>
            <button value="0" class="number cero">0</button><button id="igual" class="igual">=</button>
          </td>
        </tr>

      </tbody>
    </table>
  </form>
  <script src="index.js"></script>

</body>

</html>

4
  • Al tratarse de una calculadora, no se deberían realizar operaciones matemáticas al hacer clic en los números, lo que corresponde es concatenar en vez de sumar.
    – Triby
    Commented el 15 abr. 2021 a las 23:15
  • @Triby el código está muy verde. OP dice que está empezando y no voy a dar una respuesta con la calculadora hecha. Simplemente quise indicarle una forma simple de hacer las cosas, a partir de ahí OP podrá organizar las operaciones y otras cosas. Aquí hemos pasado de crear referencia de caaaaada botón y de una intención de crear una función por caaaada botón, a recoger todo mediante un selector de clase... lo demás, creo, debe ser parte del proceso de aprendizaje de OP.
    – A. Cedano
    Commented el 15 abr. 2021 a las 23:29
  • Gracias! nuevamente, supusiste como lo iba a hacer, e iba a hacer un codigo super largo, con estos ejemplos puedo ver como todo esta mejor simplificado, sin tener que crear elementos para cada numero.
    – Jonathan
    Commented el 15 abr. 2021 a las 23:38
  • @A.Cedano, entiendo perfectamente el punto, pero OP concatena cada número en vez de sumarlo. Lo bueno es que ya tiene un muy buen punto de partida.
    – Triby
    Commented el 16 abr. 2021 a las 15:01

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.