1

mi problema es el siguiente: Tengo un navbar el cual despliega todas las categorías obtenidas de la BD, dichas categorías las muestro en una etiqueta data id="categoria" value="$c->nombre" para poder acceder a su valor mas adelante. E usado el evento onclick="traer()" para activar el script que permita apuntar al id="categoria" e imprimir su respectivo valor por consola.

Vista Inicio

  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    @foreach($categorias as $c)
                    <li class="nav-item dropdown" id="dropdown" onclick="traer()">
                        <data id="categoria" value="{{$c->nombre}}">{{$c->nombre}}</data>
                    </li>
                    @endforeach
                </ul>

script traer()

<script type="text/javascript">
    function traer() {
        var categoriaSel = document.getElementById('categoria').value;
        console.log('categoria seleccionada ' + categoriaSel);
    }
</script>

Al momento de chequear en consola, haciendo clic en diferentes categorías, solo me muestra el valor de la primera categoría (Colchones).

Barra de navegación con las categorías cargadas

Mensajes devueltos por consola

En conclusión lo que deberia obtener es que al hacer clic sobre Colchones, se muestre por consola la categoria colchones; al hacer clic sobre salas, se muestre por consola la categoria salas y asi con las demas categorias.

A mi parecer debo usar addListener o algo parecido pero no lo tengo muy claro, les agradecería su apoyo en como poder solucionar este problema.

1 respuesta 1

0

Los ID deben ser únicos y, para cada elemento, estás repitiéndolos; es por eso que siempre obtienes el mismo valor.

Lo más adecuado es obtener el elemento que recibió clic y, a partir de ahí, obtener los valores.

Por último, no es recomendable tener los eventos en la misma etiqueta onclick=traer(); es mejor obtener todos los elementos desde Javascript y asignar el evento a cada uno para facilitar el mantenimiento de tus proyectos.

// Crear función para los clics, recibiendo el evento como parámetro
function traer(e) {
    // e.currentTarget es el elemento LI
    console.log(e.currentTarget);
    // Ver el valor de data
    console.log(e.currentTarget.querySelector('data').value);
    // Ver el texto de data
    console.log(e.currentTarget.querySelector('data').textContent);
}

// Ejecutar hasta que se haya cargado el DOM
document.addEventListener('DOMContentLoaded', e => {
    // Obtener todos los li y asignar evento
    document.querySelectorAll('li.nav-item').forEach(item => {
        item.addEventListener('click', traer);
    });
});
data:hover::after {
    content: ' (ID ' attr(value) ')';
    font-size: .7em;
}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item dropdown" id="dropdown">
        <data value="1">Categoría 1</data>
    </li>
    <li class="nav-item dropdown" id="dropdown">
        <data value="2">Categoría 2</data>
    </li>
    <li class="nav-item dropdown" id="dropdown">
        <data value="3">Categoría 3</data>
    </li>
    <li class="nav-item dropdown" id="dropdown">
        <data value="4">Categoría 4</data>
    </li>
    <li class="nav-item dropdown" id="dropdown">
        <data value="5">Categoría 5</data>
    </li>
</ul>

Adicional: Probablemente la etiqueta data no sea necesaria, también se puede "jugar" con atributos de datos

1
  • muchas gracias Triby, has solucionado a la perfección mi problema, algún libro o documento que me recomiendes para aprender más sobre javascript y el manejo del DOM ? Commented el 22 jun. 2021 a las 0:19

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.