2

soy nuevo y estoy aprendiendo Javascript, estoy intentando hacer una calculadora y quisiera saber si hay alguna forma de poner el evento onclick desde javascript y no tener que escribirlo en el html, en el código tengo el onclick en el html pero me gustaría quitarlo de ahí y ponerlo en un archivo js.

Tambien me gustaría saber por que cuando declaro las variables fuera de la función y intento acceder al valor de estas en una función en la consola me aparece que el valor es null y sale un error pero cuando declaro las variables dentro de la función si me funciona perfectamente.

De antemano muchas gracias.

let numero2= document.getElementById("2");
let numero3= document.getElementById("3");
let numero4= document.getElementById("4");
let numero6= document.getElementById("6");
let numero5= document.getElementById("5");
let numero7= document.getElementById("7");
let numero8= document.getElementById("8");
let numero9= document.getElementById("9");
let numero0= document.getElementById("0");
let tipotexto= document.getElementById("cuatro");
function uno(){
    let numero1= document.getElementById("1");
    let tipotexto= document.getElementById("cuatro");
    tipotexto.value=numero1.value;
}

numero1.onclick.function(){
    let numero1= document.getElementById("1");
    let tipotexto= document.getElementById("cuatro");
    tipotexto.value=numero1.value;
}
<input type="text" name="" class="texto" id="cuatro">
<input type="button" name="" value="1"class="buton" id="1" onclick="uno();">

0

1 respuesta 1

7

Me supondré que aún no conoces sobre los listener, así que te explicaré de una forma sencilla.

Con el onclick en tu botón, estás indicando que cuando hagamos clic en el botón, se ejecutará cierta función. Este onclick es un evento que ocurre cuando le hagamos clic.

Ahora, existe una forma de poder escuchar estos eventos desde JavaScript sin necesidad de poner onclick en el botón, sería usar el método addEventListener.

Como dice la documentación:

addEventListener() Registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest.

Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.


En pocas palabras, con addEventListener podemos escuchar los eventos que ocurre en cierto elemento, y una vez ocurra, se ejecutan dichas instrucciones. Por ejemplo, capturemos a tu botón:

let numero1 = document.getElementById('1'); // capturo el botón

Y a ese botón, podemos escuchar los eventos que ocurra, en este caso, cuando ocurra el click, y una vez ocurra eso, ejecuta a la función uno (que es el segundo parámetro del listener):

numero1.addEventListener("click", uno) // escucho el evento "click" en el botón "numero1"

Y con esto, llamas a la función sin necesidad de tener onclick en tu HTML.

let tipotexto = document.getElementById('cuatro');
let numero1 = document.getElementById('1'); // capturo el botón

numero1.addEventListener("click", uno) // escucho el evento "click" en el botón "numero1"

function uno() {
  tipotexto.value = numero1.value;
}
<input type="text" name="" class="texto" id="cuatro">
<input type="button" name="" value="1" class="buton" id="1">

1
  • 1
    si, me imagine... suelo hacer lo mismo!! Commented el 1 mar. 2023 a las 18:36

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.