Skip to main content
se añadieron 35 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25
  1. Si te fijas, tu variable teclas tiene un listado de nodos con los botones de la calculadora. Si haces teclas.valuemuestras por consola teclas.value verás que es undefinedundefined porque no estás accediendo a ningún botón en concreto:
  1. El hecho de declarar teclas como una variable global hace que sea accesible dentro de la función add pero esto es una muy mala práctica ya que puede haber conflictos con otras variables o métodos (aquí más info sobre var, let y const)

  2. Ya que estás llamando a la función add dentro del for en el que ya estás recorriendo teclas lo ideal es que le pases el valor del botón pulsado a la función add. Para ello simplemente pásale el valor de this.value ya que this en ese contexto hace referencia al teclas[i] correspondiente. Además, ten en cuenta que o bien puedes pasarle la referencia a la función encapsulando la llamada con function(){...} (te pongo este ejemplo):

O bien jugar con el evento (como en este ejemplo y. aquíAquí más info):

  1. Si te fijas, tu variable teclas tiene un listado de nodos con los botones de la calculadora. Si haces teclas.value es undefined porque no estás accediendo a ningún botón en concreto:
  1. El hecho de declarar teclas como una variable global hace que sea accesible dentro de la función add pero esto es una muy mala práctica ya que puede haber conflictos con otras variables o métodos (aquí más info sobre var, let y const)

  2. Ya que estás llamando a la función add dentro del for en el que ya estás recorriendo teclas lo ideal es que le pases el valor del botón pulsado a la función add. Para ello simplemente pásale el valor de this.value ya que this en ese contexto hace referencia al teclas[i] correspondiente. Además, ten en cuenta que o bien pasarle la referencia a la función encapsulando la llamada con function(){...} (te pongo este ejemplo):

O bien jugar con el evento (como en este ejemplo y aquí más info):

  1. Si te fijas, tu variable teclas tiene un listado de nodos con los botones de la calculadora. Si muestras por consola teclas.value verás que es undefined porque no estás accediendo a ningún botón en concreto:
  1. El hecho de declarar teclas como una variable global hace que sea accesible dentro de la función add pero esto es una muy mala práctica ya que puede haber conflictos con otras variables o métodos (aquí más info sobre var, let y const)

  2. Ya que estás llamando a la función add dentro del for en el que ya estás recorriendo teclas lo ideal es que le pases el valor del botón pulsado a la función add. Para ello simplemente pásale el valor de this.value ya que this en ese contexto hace referencia al teclas[i] correspondiente. Además, ten en cuenta que o bien puedes pasarle la referencia a la función encapsulando la llamada con function(){...} (te pongo este ejemplo):

O bien jugar con el evento (como en este ejemplo. Aquí más info):

Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25

Vamos por partes:

  1. Si te fijas, tu variable teclas tiene un listado de nodos con los botones de la calculadora. Si haces teclas.value es undefined porque no estás accediendo a ningún botón en concreto:

var teclas = document.querySelectorAll('.key');

console.log(teclas);
<div id="calculator">
        <div class="calc_keys"> 
          <input class="input" id="input0" value="5"; type="text" name="fname">
          <button class="operator suma">+</button>
          <button class="operator resta">-</button>
          <button class="operator mult">*</button>
          <button class="operator div">/</button>
          <button value="7" class="key">7</button>
          <button  value="8" class="key">8</button>
          <button  value="9" class="key">9</button>
          <button  value="4" class="key">4</button>
          <button  value="5" class="key">5</button>
          <button  value="6" class="key">6</button>
          <button  value="1" class="key">1</button>
          <button  value="2" class="key">2</button>
          <button  value="3" class="key">3</button>
          <button  value="0" class="cero">0</button>
          <button class="punto">.</button>
          <button id="borrar" class="borrar">Borrar</button>
          <button class="igual">=</button>
        </div>
      </div>

  1. El hecho de declarar teclas como una variable global hace que sea accesible dentro de la función add pero esto es una muy mala práctica ya que puede haber conflictos con otras variables o métodos (aquí más info sobre var, let y const)

  2. Ya que estás llamando a la función add dentro del for en el que ya estás recorriendo teclas lo ideal es que le pases el valor del botón pulsado a la función add. Para ello simplemente pásale el valor de this.value ya que this en ese contexto hace referencia al teclas[i] correspondiente. Además, ten en cuenta que o bien pasarle la referencia a la función encapsulando la llamada con function(){...} (te pongo este ejemplo):

/* VAR RESULTADO */
var input0 = document.getElementById("input0");

var teclas = document.querySelectorAll('.key');

function add(val){
    input0.value = val;
  }

for (var i = 0 ; i < teclas.length; i++) {
    teclas[i].addEventListener('click' , function(){add(this.value)}) ; 
 }
<div id="calculator">
        <div class="calc_keys"> 
          <input class="input" id="input0" value="5"; type="text" name="fname">
          <button class="operator suma">+</button>
          <button class="operator resta">-</button>
          <button class="operator mult">*</button>
          <button class="operator div">/</button>
          <button value="7" class="key">7</button>
          <button  value="8" class="key">8</button>
          <button  value="9" class="key">9</button>
          <button  value="4" class="key">4</button>
          <button  value="5" class="key">5</button>
          <button  value="6" class="key">6</button>
          <button  value="1" class="key">1</button>
          <button  value="2" class="key">2</button>
          <button  value="3" class="key">3</button>
          <button  value="0" class="cero">0</button>
          <button class="punto">.</button>
          <button id="borrar" class="borrar">Borrar</button>
          <button class="igual">=</button>
        </div>
      </div>

O bien jugar con el evento (como en este ejemplo y aquí más info):

/* VAR RESULTADO */
var input0 = document.getElementById("input0");

var teclas = document.querySelectorAll('.key');

function add(event){  
    input0.value = event.target.value;
  }

for (var i = 0 ; i < teclas.length; i++) {
    teclas[i].addEventListener('click' , add) ; 
 }
<div id="calculator">
        <div class="calc_keys"> 
          <input class="input" id="input0" value="5"; type="text" name="fname">
          <button class="operator suma">+</button>
          <button class="operator resta">-</button>
          <button class="operator mult">*</button>
          <button class="operator div">/</button>
          <button value="7" class="key">7</button>
          <button  value="8" class="key">8</button>
          <button  value="9" class="key">9</button>
          <button  value="4" class="key">4</button>
          <button  value="5" class="key">5</button>
          <button  value="6" class="key">6</button>
          <button  value="1" class="key">1</button>
          <button  value="2" class="key">2</button>
          <button  value="3" class="key">3</button>
          <button  value="0" class="cero">0</button>
          <button class="punto">.</button>
          <button id="borrar" class="borrar">Borrar</button>
          <button class="igual">=</button>
        </div>
      </div>

Personalmente me gusta más la primera opción pero para gustos los colores :)