Vamos por partes:
- 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>
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
)
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 :)