I want to make a post excerpt into a clickable link.

And structure of my website is as follows.

  <div class="post_widget">
    <a class="poast_thumbnail" href="example.com">
        <div class="thumbnail>
                <img ...>
        </div>
    </a>
    <div class="post">
        <div class="title">
            <a href="example.com">this is sample</a>
        </div>
        <div class="post_excerpt">
          <p> == $0
            "Hello world"
            ::after
          </p>
          <a class="read_more" href="https://example.com">read more</a>
        </div>
    </div>
   </div>

I found the following JavaScript and modified it to suit my website.

<script>
const postExcerpts = document.querySelectorAll('.post .post_excerpt');

postExcerpts.forEach(postExcerpt => {
    const postUrl = postExcerpt.parentNode.querySelector('.title a').href;
    postExcerpt.addEventListener('click', () => {
        window.location.href = postUrl;
    });
});
</script>

I've changed .querySelector several times and tested it, but not working.

No errors appear in the chrome developer tools.

I'd like to hear some advice on which part I need to fix.

const postExcerpts = document.querySelectorAll('.post .post_excerpt');

postExcerpts.forEach(postExcerpt => {
    const postUrl = postExcerpt.parentNode.querySelector('.title a').href;
    postExcerpt.addEventListener('click', () => {
        window.location.href = postUrl;
    });
});

<div class="post">
    <div class="title">
        <a href="example.com">this is sample</a>
    </div>
    <div class="post_excerpt">
        <p>hello world</p>
    </div>
</div>