I have a forEach that will be showing a row of logos from firestore. I want these to be clickable with their url, both url and logo will be in the same document.
Im able to fetch and show all the logos but they are not clickable.
This is the code I use to get the foreach to show the logos.
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);
});
});
How do I create the url to be the link, and make each logo clickable?
querySnapshot.forEach((doc) => {
const docData = doc.data();
team.innerHTML += `
<a href="${docData.url}">
<img src="${docData.logo}" class="logo" />
</a>
`;
});
or with document.createElement and 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);
});
I noticed a couple of things, not sure if that is causing your issue with the link not clickable.
'/>' instead of '>' for the image ending tag and
'</a>' instead of '<a/>' for the anchor tag.
Try
<a href="">
<img class="logo" />
</a>