wrong link, wrong place

Question

ok so I'm trying to display news articles from an api. what I've written in javascript does just that (article photo, title, author, etc) except for the links to each particular article. at first they werent clickable at all, then I changed the css with something I found here. that made the whole entire page clickable and only applies to one link, and one link only. so what I need to know is how to make sure the clicks happen in the right place and go to the right location? please and thank you.

function GenerateArticle(data) {
  const Article = document.getElementById("ArticleGrid")
  for (let i = 0; i < data.length; i++) {
    const Div = document.createElement("Article");
    Div.innerHTML =
      `<img src = ${data[i].urlToImage}>
            <h5>${data[i].title}</h5>
            <p>${data[i].publishedAt}</p>
            <p>${data[i].description}</p>
            <p>${data[i].content}</p>
            <p>${data[i].source.name}</p>
            <p>${data[i].author}</p>
            <a href = '${data[i].url}'></a>`;
    Article.appendChild(Div);
  }
}

a {
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
}

Answer 1

What you're trying to achieve is a stretched link, an anchor that has no actual content but spans the entire contents of it's parent node. Only, you're not quite there. A few ways to do this but let's simplify for demonstration.

Set the position style property on the Div to relative.

const Div = document.createElement("article");
Div.style.position = "relative";

Absolute position your link in place of fixed.

a {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
}