Tengo un forEach que mostrará una fila de logotipos de firestore. Quiero que se pueda hacer clic en estos con su URL, tanto la URL como el logotipo estarán en el mismo documento.
Puedo obtener y mostrar todos los logotipos, pero no se puede hacer clic en ellos.
Este es el código que uso para que foreach muestre los logotipos.
const i = query(collection(db, "built")); const unsubscribe = onSnapshot(i, (querySnapshot) => { const team = document.querySelector('.built'); querySnapshot.forEach((doc) => { const docData = doc.data(); const teams = team.appendChild(document.createElement('built')); teams.innerHTML = ` <a href=""> <img class="logo"> <a/> `; teams.children[0].href = docData.url; teams.children[1].src = docData.logo; console.log("Current data: ", docData); }); });¿Cómo creo la URL para que sea el enlace y hago que se pueda hacer clic en cada logotipo?
querySnapshot.forEach((doc) => { const docData = doc.data(); team.innerHTML += ` <a href="${docData.url}"> <img src="${docData.logo}" class="logo" /> </a> `; });o con document.createElement y logo div wrapper
querySnapshot.forEach((doc) => { const docData = doc.data(); const link = document.createElement('a'); const logo = document.createElement('img'); logo.src = docData.logo; const logoWrapper = document.createElement('div'); logoWrapper.classList.add('logo'); link.href = docData.url; logoWrapper.appendChild(logo); link.appendChild(logoWrapper); team.appendChild(link); });Noté un par de cosas, no estoy seguro de si eso está causando su problema con el enlace que no se puede hacer clic.
'/>' en lugar de '>' para la etiqueta final de la imagen y '</a>' en lugar de '<a/>' para la etiqueta de anclaje.
Probar
<a href=""> <img class="logo" /> </a>