How to make each Wordpress post clickable and read the link from the title element of a post to apply it to the body of that specific post?

I'm still quite a beginner, so please forgive me this basic (and long) question.

So I am stuck on a simple problem. I have a Wordpress site where I have a news page, technically these are blog posts. These posts appear one after the other.
Each post contains a title <h2> which contains a link <a href="https://...">. I tried to make each post clickable, so you can click on the entire surface of a blog post, not only on the <h2> title. By clicking a blog post it should redirect to the same URL as the <h2>'s link. I tried it with simple JavaScript the following way.

The HTML:

<div class="news-container">
  <div class="blog-content-wrapper">
    <div class="blog-post-container">
      <h2 class="blog-entry-title">
        <a href="https://websiteaddress.com" target="_self">A Title</a>
      </h2>
      <div class="blog-entry-text">
        <p class="blog-post-content-text">
          Lorem ipsum text.
        </p>
      </div>
    </div>
  </div>
  <div class="blog-content-wrapper">
    <div class="blog-post-container">
      <h2 class="blog-entry-title">
        <a href="https://websiteaddress.com" target="_self">An Other Title</a>
      </h2>
      <div class="blog-entry-text">
        <p class="blog-post-content-text">
          Lorem ipsum text.
        </p>
      </div>
    </div>
  </div>
  <div class="blog-content-wrapper">
    <div class="blog-post-container">
      <h2 class="blog-entry-title">
        <a href="https://websiteaddress.com" target="_self">Still A Title</a>
      </h2>
      <div class="blog-entry-text">
        <p class="blog-post-content-text">
          Lorem ipsum text.
        </p>
      </div>
    </div>
  </div>
</div>
 .
 .
 .
etc.

The JavaScript:

// select a post
const wrapper = document.querySelector('.blog-content-wrapper')

for (let i = 0; i < wrapper.children.length; i++) {
  let links = wrapper.children[i].getElementsByTagName('a');
//getting the link
  const link = links[0];
//getting each post's 'boxes'
  let box = wrapper.children[i]
// to click on the 'box' and open the link
  box.addEventListener('click', function () {
   window.open(link, '_self');
  });
}

The getElementsByTagName('a') returns a collection. If I have 6 posts normally it should iterate 6 links. Where I stuck is to make a given post to get its own link. Let say the 2nd post should get the 2nd link.
(PS: I do not understand and I don't use JQuery)

Thanks!

Nothing really beats proper semantic html. So your best bet should be to change the wrapper element to an 'a' tag.

However, here is the solution, along with a codepen, i came up with:

https://codepen.io/webdevjones/pen/jOYjGjr

//grab all the posts
const posts = document.querySelectorAll('.blog-content-wrapper')

//loop over each post, grab the link, add click event listner to .blog-content-wrapper
for(let i = 0; i < posts.length; ++i){
    //each post that we get is its own DOM, 
    //so we can call query selector again to isolate THIS blogs '<a>' tag
    const blogLinkTag = posts[i].querySelector('a')
    //extract link from href attribute
    const link = blogLinkTag.href

    //Optional: You could totally set this in css, but i didn't
    posts[i].style.cursor = 'pointer'

    //click event handler
    posts[i].addEventListener('click', () => {
        //sends us to the new page
        window.location.href = link
    })
}