2

Estoy iniciando con practicas en Js y me encuentro con el error detallado en el título al mmomento de probar el siguiente

const boton = document.querySelector('boton');

boton.addEventListener("click", function(){ alert("Hola!"); });
3
  • ¿Qué se supone que intentas seleccionar aquí querySelector('boton')? Agrega el HTML de tu botón.
    – A. Cedano
    el 15 oct. 2021 a las 22:47
  • Estaba intentando seleccionar un botón, pero lo que debí haber hecho es seleccionar el tipo de elemento ('button'), utilicé mal el querySelector. Gracias! el 16 oct. 2021 a las 16:38
  • También quiero señalar que dependiendo de lo que quieras hacer debes escoger el tipo de selección más conveniente. Por ejemplo, si quieres alcanzar un botón en específico es mejor seleccionarlo por su id que es único, mientras que si quieres seleccionar varios elementos puedes usar la clase o el tipo de elemento y generalmente en ese caso se usa querySelectorAll para alcanzarlos todos y operar con ellos.
    – A. Cedano
    el 16 oct. 2021 a las 21:47

1 respuesta 1

2

Revisa la documentación de querySelector, pues tu actual forma de seleccionar no tiene ningún sentido:

querySelector('boton')

querySelector usa selectores CSS para alcanzar los elementos.

Por ejemplo, para seleccionar por el id del elemento se usa #:

const boton = document.querySelector('#boton');

boton.addEventListener("click", function() {
  alert("Hola!");
});
<button id="boton">Click me</button>

Para seleccionar por la clase del elemento se usa .nombreDeLaClase:

const boton = document.querySelector('.unaClase');

boton.addEventListener("click", function() {
  alert("Hola!");
});
<button class="unaClase">Click me</button>

Para seleccionar por el tipo de elemento se usa elTipo (donde elTipo es el tipo del elemento, escrito en inglés, no en español, por ejemplo, para un botón, debes poner button):

const boton = document.querySelector('button');

boton.addEventListener("click", function() {
  alert("Hola!");
});
<button class="unaClase">Click me</button>

... Y así, hasta selecciones más complejas, combinadas, etc que se hacen por lo general con querySelectorAll().

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.