2

Quiero que cada vez que se pulse en una tecla (en cualquier < button > con la clase " key ") el numero se añada a el input

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

Entonces he hecho esto:

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

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

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

for (var i = 0 ; i < teclas.length; i++) {
    teclas[i].addEventListener('click' , add ) ; 
 }

Con el ultimo bucle si pulso cualquier tecla con la clase " key " me aparece en el input "undefined". He probado a poner teclas.value en la declaración de variable pero entonces da el error " Cannot read property 'length' of undefined "

2 respuestas 2

2

document.querySelectorAll('.key') retorna un array con los elementos que tengan la clase .key y claramente un array no tiene una propiedad value.

Intenta utilizando el event en el metodo add y con la propiedad target.value accedes al valor del boton que se le hizo click:

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

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

function add(e){

    input0.value = e.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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
          <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>

2

Vamos por partes:

  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:

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 puedes 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. 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 :)

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.