0

lo que busco realizar es un menu en la parte izquierda de la pagina web para visualizar diferentes tipos de categorias asi que decidi crear una lista de etiquetas a donde le coloque el valor de que tipo de categoria es y cuando vaya hacer click aplicar un event.preventDefault() y obtener el valor de ese etiqueta y buscar y actualizar una parte de la pagina web para consultar los productos. pero me sale un error en la consola que es Uncaught (in promise) TypeError: itemCategoria.onclick is not a function alguna sugerencia de como corregir el error o como lo harian ustedes gracias

   function consultaFirebase() {
    firebaseConfig.ref('categoria').once('value').then(datos => {
        datos.forEach(element => {
            tarjetaCategoria(element)
        });
    })
}


function tarjetaCategoria(params) {
    var itemCategoria = document.createElement('a');
    itemCategoria.innerHTML=`${params.val().tipoCategoria}`;
    itemCategoria.href = params.val().tipoCategoria;
    itemCategoria.onclick('click', () => {
        console.log('ok');
    })
    producto.appendChild(itemCategoria)    
}
3
  • Estás confundiendo 2 cosas.
    – Mateo
    Commented el 15 jul. 2021 a las 15:18
  • @Mateo ¿como seria? Commented el 15 jul. 2021 a las 15:21
  • Te lo acabo de explicar en una respuesta. Estabas mezclando las dos formas de agregar el evento. onclick es una propiedad, por eso te da el error cuando intentas llamarlo con ()
    – Mateo
    Commented el 15 jul. 2021 a las 15:32

1 respuesta 1

1

Los eventos se pueden declarar de dos formas:

  • Mediante el atributo onclick en HTML, que es a lo que la propiedad (no es una función) .onclick hace referencia en Javascript. De esta manera se puede asignar solo un handler.

    itemCategoria.onclick = function () {
        console.log('realizar accion');
    }
    
  • Mediante la función addEventListener(). El primer parámetro es el evento y el segundo la función a ejecutar (también puede ser una función flecha). Con este método puedes agregar todos los handlers que necesites.

    listener1 = itemCategoria.addEventListener('click', () => {
       ​console.log('realizar accion');
    })
    

Para eliminarlo debes guardar el objeto que devuelve la función addEventListener() y pasárselo de una manera similar a removeEventListener():

  itemCategoria.removeEventListener('click', listener1)
3
  • Buena respuesta, quizá solo falta agregar porqué es mejor usar .addEventListener
    – Triby
    Commented el 15 jul. 2021 a las 15:35
  • Más allá de que uno admite múltiples handlers y el otro no, no sé que otros puntos positivos tenga.
    – Mateo
    Commented el 15 jul. 2021 a las 15:52
  • Según la documentación: Da un control más detallado de la fase en la que el listener se activa (capturing vs. bubbling) y Funciona en cualquier elemento del DOM, no únicamente con elementos de HTML.
    – Triby
    Commented el 15 jul. 2021 a las 15:54

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.