1

Sucede que estoy creando un catalogo de licores y la información la traigo desde firebase. Para simplificar, he optado por crear algunas cartas de bootstrap desde un forEach con innerHTML como muestro a continuación.

const database = firebase.firestore();

const obtenerProductos = () => database.collection("productos").get();
const obtenerProductos2 = () => database.collection("productos2").get();

const productosContainer = document.getElementById("productos-container");
const productosContainer2 = document.getElementById("productos-container2");


window.addEventListener('DOMContentLoaded' , async (e)=>{



    const productos = await obtenerProductos();
    const productos2 = await obtenerProductos2();

    

    productos.forEach(doc =>{

        productosContainer.innerHTML += `
        <div class="card">
        <img class="card-img-top" src="${doc.data().url}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title" id="nombre-producto">${doc.data().nombre}</h5>
          <p class="card-text"><strong>${doc.data().precio + "$"}</strong></p>
          <button onclick="mostrarNombre()" type="button" class="btn btn-success">Agregar al carrito  
          <span class="fas fa-shopping-cart"></span>
          </button>            
          </div>
        
            `                
    });

    productos2.forEach(doc =>{

        productosContainer2.innerHTML +=  `
      
        <div class="card">
        <img class="card-img-top" src="${doc.data().url}" alt="Card image cap" style="width: 177.33px;height: 177.33px;">
        <div class="card-body">
          <h5 class="card-title" id="nombre-producto">${doc.data().nombre}</h5>
          <p class="card-text"><strong>${doc.data().precio + "$"}</strong></p>
          <button onclick="agregarCarrito()" type="button" class="btn btn-success">Agregar al carrito  
          <span class="fas fa-shopping-cart"></span>
          </button> 
      
        `

    });

});

Gracias al anterior código puedo generar lo siguiente:

introducir la descripción de la imagen aquí

ahora bien, necesito crear un "carrito de compras" para el cual tengo que extraer la información de la tarjeta a la cual se le hizo click en "agregar al carrito". Es en este punto donde no me funcionan las cosas.

intente lo siguiente para intentar obtener un atributo (en este caso el nombre):

function mostrarNombre(){
  console.log(document.getElementById("nombre-producto").innerHTML);
}

pero al presionar cualquier "botón de agregar al carrito" siempre obtengo el mismo valor 'aguardiente' que es el nombre del primer elemento de las tarjetas.

Mi pregunta es: como puedo obtener los atributos de cada licor que pretenda agregar al carrito.

espero haber sido bien descriptivo esta es mi primer pregunta en la comunidad.

2 respuestas 2

0

Para recoger datos con id necesitas que el identificador sea único, asi que únicamente necesitas añadir al crearlo por ejemplo un número que incrementes con el bucle.

function mostrarNombre(a) {
  console.log(document.getElementById('nombre-producto'+a).innerHTML);
}
<div class="card-body">
  <h5 class="card-title" id="nombre-producto1">nombre 1</h5>
  <p class="card-text"><strong>precio 1</strong></p>
  <button onclick="mostrarNombre(1)" type="button" class="btn btn-success">Agregar al carrito  
    <span class="fas fa-shopping-cart"></span>
  </button>            
</div>
<div class="card-body">
  <h5 class="card-title" id="nombre-producto2">nombre 2</h5>
  <p class="card-text"><strong>precio 2</strong></p>
  <button onclick="mostrarNombre(2)" type="button" class="btn btn-success">Agregar al carrito  
    <span class="fas fa-shopping-cart"></span>
  </button>            
</div>
<div class="card-body">
  <h5 class="card-title" id="nombre-producto3">nombre 3</h5>
  <p class="card-text"><strong>precio 3</strong></p>
  <button onclick="mostrarNombre(3)" type="button" class="btn btn-success">Agregar al carrito  
    <span class="fas fa-shopping-cart"></span>
  </button>            
</div>

0

Se supone que la id es única.

Cuando usas la misma identificación para varios objetos, solo obtendrás el primero valor.

Ejemplo:

const input = document.getElementById('input').value;

console.log(input);
<input id="input" type="text" value="hola" /> 
<input id="input" type="text" value="como" /> 
<input id="input" type="text" value="estas?" /> 

Creo que en tu caso es mejor usar class.

const inputs = document.getElementsByClassName("input");

Array.prototype.forEach.call(inputs, function(input) {
    console.log(input.value);
});
<input class="input" type="text" value="hola" />
<input class="input" type="text" value="como" />
<input class="input" type="text" value="estas?" />

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.