0

Mi código es el siguiente, y quiero que cuando haga click en el boton con clase active y id btn haga una acción, por ahora un alert para probar, pero igualmente haga click y no muestra el alert:

  <div class="container__items-flex">
    <ul>
      <li class="move-0"><a href="#" class="active" id="btn">Menú</a></li>
      <li class="move-1"><a href="#">Inicio</a></li>
      <li class="move-2"><a href="#">Historia</a></li>
      <li class="move-3"><a href="#">Política</a></li>
    </ul>
  </div>

Ignoren las clases move...

Luego mi código de js es el siguiente:

const menu_btn = document.querySelector('btn');

console.log(menu_btn);

if (menu_btn) {
  menu_btn.addEventListener('click', () => {
    alert("Funciona re piola chabón");
  });
}
1
  • 4
    ¿No será document.querySelector('#btn'); (?... Commented el 30 jun. 2023 a las 23:19

2 respuestas 2

4

Es document.querySelector('#btn') el "#" representa un id, o sea es equivalente a <element id="btn"></element>, mientras que document.querySelector('btn') sería equivalente a <btn></btn>, o también podrías usar document.getElementByID('btn') para evitar confusiones

1

El error se encuentra en la siguiente linea de codigo

const menu_btn = document.querySelector('btn');

si usas querySelector(), dentro de las comillas tienes que especificar lo que quieres selecccionar como lo es una clase ., id #, has de cuenta que estas seleccionando desde css y siguiendo esa misma lógica no te vas a volver a equivocar.

Ahora para corregir el error simplemente modifica el coidgo de la siguiente manera:

const menu_btn = document.querySelector('#btn');

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