How To Take A Href Attribute And Use It In A Div When Clicking On It?

Question

In javascript I want to tell post-container that when I click on it, take the href located at link and go to page X. There are multiple post-container My code is this:

Solution 1:

I hope I'm interpreting your question correctly, but you can just rearrange where you're writing your a href tag. Instead, wrap your div inside of it. This will make the entire div element a link.

<aclass="link"href="google.com"><divclass="post-container"><h2class="post-title">Hello, World!</h2><divclass="date-posts"></div></div></a>

Solution 2:

This will work.Add Event listener to the parent element (Event Delegation).You can take the href property of the child element and then use window.location.href.You might need to add preventDefault() to avoid default behaviour of a tag

If you have multiple tags with same class name.You have to use querySelectorAll .Either way if you have single elements or multiple elements with same class name use querySelctorAll.

// if you have one taglet ele = document.querySelectorAll(".post-container")
ele.forEach(element => {
  element.addEventListener("click", function(e) {
    e.preventDefault();
    let href = element.children[0].getAttribute("href")
    window.location.href = href;

  })

})

.post-container {
  background-color: green;
}

<divclass="post-container"><aclass="link"href="X"><h2class="post-title">Hello, world!</h2></a><divclass="date-posts">...</div></div>

Solution 3:

Assuming you have multiple .post-containers you would need to iterate over each of them and add an event listener to handle click events. On click, find the a get its href and set the window.location (I just console log it in this demo)

(function(){
    let elems = document.querySelectorAll(".post-container");
    for (i = 0; i < elems.length; ++i) {
        let el = elems[i];
        el.addEventListener("click", function(e) {
            e.preventDefault();
            let href = el.querySelector("a").getAttribute("href");
            console.log("href",href);
            //window.location.href = href;
        })
    }
})();

<divclass="post-container"><aclass="link"href="X"><h2class="post-title">Hello, world!</h2></a><divclass="date-posts">...</div></div><divclass="post-container"><aclass="link"href="Y"><h2class="post-title">Goodbye world!</h2></a><divclass="date-posts">...</div></div>

Solution 4:

Javascript:

var elements = document.getElementsByClassName('post-container');

var loadLink = function() {

    var link = this.getElementsByTagName("a")[0].href;

    window.location.href = link;

};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', loadLink, false);
}

Check working demo

Solution 5:

document.getElementsByClassName('post-container')[0].onclick = function(e){
  location.href = this.children[0].href;
}

javascript nyumon