forEach link not appearing as clickable when fetching from Firestore-CodePudding

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 >
                    <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?

CodePudding user response：

querySnapshot.forEach((doc) => {
    const docData = doc.data();
    team.innerHTML  = `
      <a href="${docData.url}">
        <img src="${docData.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);
});

CodePudding user response：

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  />
</a>