0

I am making a blog site that maps through the database and produces cards with some of the blog info on them. Each card has a dynamically populated "Read More" button. I want the onclick event to be a modal with all of the blog data. I'm pretty sure I need to use the "this" keyword to get it to work but am open to other suggestions as well. 

dataCall();

async function dataCall() {
  try {
    const res = await fetch("/api/blog");
    const data = await res.json();

    for (info of data) {
      const root = document.createElement("div");
      const title = document.createElement("h3");
      const snip = document.createElement("div");

      root.className = "blog-item";
      title.className = "title m-3";
      snip.className = "snip";

      title.textContent = info.title;
      snip.textContent = info.blog;

      const btn = document.createElement("a");
      btn.className = "btn btn-light m-3 read-more";
      btn.id = "read-more";
      btn.textContent = "Read More";

      document.getElementById("blogs").append(root);
      root.append(title, snip, btn);

      const readMore = document.getElementsByClassName("read-more");
      for (let i = 0; i < readMore.length; i++) {
        readMore[i].addEventListener("click", blogModal);
      }
    }
  } catch (err) {
    console.log(err);
  }
}

const blogModal = () => {
  console.log(this); // How can I get the blog data to appear here? 

};

I have tried 

console.log(this.info)

but it only pulls the data from the very last blog and not the info of the blog clicked.

Thank you for your help!!

AylaWinters
  • 1,121
  • 2
  • 7
  • 24

1 Answers1

0

You don't need to use this you can just pass the data to the modal. Like:

readMore[i].addEventListener("click", () => blogModal(info));

And for the modal:

const blogModal = info => {
  console.log(info); 
};

I hope that helped!

Kubwimana Adrien
  • 2,463
  • 2
  • 8
  • 11