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:

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

I want to be able to click outside the Hello, world! title of my post in any area of post-container and go to page X

Any idea how to do this?

Possible duplicate of [a href link for entire div in HTML/CSS](https://stackoverflow.com/questions/4465923/a-href-link-for-entire-div-in-html-css) — Tiago Martins Peres, Oct 09 '19 at 17:18
What should happen if you click *inside* the `Hello, world!`? — Moob, Oct 09 '19 at 17:24

score 3 · Answer 1 · answered Oct 09 '19 at 16:58

3

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.

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

answered Oct 09 '19 at 16:58

paoiherpoais

334
1
10

I did what you suggest, but it doesn't work in my case. I share a question I asked so you can better understand my problem. https://stackoverflow.com/questions/58295443/post-clickable-in-blogger – sebas.varela Oct 09 '19 at 17:02
Sebastián Varella Gmz It would work if you managed to do it. The other question is something similar but different, the answer has other considerations. You might want to add a JavaScript onclick event to the div and forget the a, like this `
`
– Tiago Martins Peres Oct 09 '19 at 17:12

Shubham Dixit · Accepted Answer · 2019-10-09T17:38:44.843

1

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 tag
let 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;
}

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

edited Oct 09 '19 at 17:38

answered Oct 09 '19 at 17:00

Shubham Dixit

9,242
4
27
46

1

Thank you. Excellent help :) – sebas.varela Oct 09 '19 at 17:22
@SebastiánVarellaGmz this solution will not work if there are two elements with `post-container` class – htmler Oct 09 '19 at 17:33
@Āchahms I share a question I asked so you can better understand my problem. https://stackoverflow.com/questions/58295443/post-clickable-in-blogger – sebas.varela Oct 09 '19 at 17:36
@Shubh Could you provide me with a solution for multiple `post-container`? – sebas.varela Oct 09 '19 at 18:08
I already did .It will work for multiple post containers.Updated solution – Shubham Dixit Oct 09 '19 at 18:09

htmler · Answer 3 · 2019-10-09T17:52:08.870

0

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

edited Oct 09 '19 at 17:52

answered Oct 09 '19 at 17:17

htmler

380
1
4
12

Your vanilla JS will only work on the first `.post-container` – Moob Oct 09 '19 at 17:26

score 0 · Answer 4 · answered Oct 09 '19 at 17:38

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;
        })
    }
})();

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

I get the next error message: The content of elements must consist of well-formed character data or markup. In the column 20 of line `for (i = 0; i < elems.length; ++i) {` Please check this link for understand my problem: https://stackoverflow.com/questions/58295443/post-clickable-in-blogger — sebas.varela, Oct 09 '19 at 17:50

Cody Fortenberry · Answer 5 · 2019-10-09T17:17:42.780

-1

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

edited Oct 09 '19 at 17:17

answered Oct 09 '19 at 17:02

Cody Fortenberry

200
2
4

`HTMLCollection` does not have an `onclick` property. – connexo Oct 09 '19 at 17:05
You forgot an `s` as well...and, what if there are multiple `post-container`? – Asons Oct 09 '19 at 17:10
If there were multiple then I would have purposed a different solution. That was beyond the scope of the requirement. – Cody Fortenberry Oct 09 '19 at 17:21
@CodyFortenberry Could you provide me with a solution for multiple `post-container`? – sebas.varela Oct 09 '19 at 18:06
@SebastiánVarellaGmz just a simple loop would work. https://jsfiddle.net/8nmqzth5/ other than that I would probably use querySelectorAll as it has a native forEach function. – Cody Fortenberry Oct 10 '19 at 12:53

How to take a href attribute and use it in a div when clicking on it?

5 Answers5

Linked