Javascript: click on element instead of button

Question

I have simple code where is 4 containers with buttons. Now I tried to make whole element clickable to redirect to site specific to the container.

One element like I have in example working fine but when I add more than one, others will not work.

There is facebook, youtube, google, and twitter container and each of them have specific link to redirect.

So I need to make more than one element correctly clickable not only on a button but on whole element.

var el = document.getElementById("container");

if (el.addEventListener) {
  el.addEventListener("click", function() {
    document.getElementById("button").click();
  }, false);
} else {
  el.attachEvent("onclick", function() {
    document.getElementById("button").click();
  });
}

#container {
  background: coral;
  padding: 32px;
  margin: 16px;
  cursor: pointer;
}

<div id="container">

  <a id="button" href="https://google.sk/">Google</a>

</div>

<div id="container">

  <a id="button" href="https://youtube.com/">Youtube</a>

</div>

<div id="container">

  <a id="button" href="https://facebook.com/">Facebook</a>

</div>

<div id="container">

  <a id="button" href="https://twitter.com/">Twitter</a>

</div>

@AlibiGhazi when I use class selector script will be not working and different ids but I have hunderds of elements like this so different ids will be problem:D — Matúš Rebroš
– Matúš Rebroš, Commented Aug 15, 2020 at 13:59
@tarkh yes but when I use class selector script will not be working — Matúš Rebroš
– Matúš Rebroš, Commented Aug 15, 2020 at 14:00
Try wrapping the div with an anchor tag like so <a href="google.sk"><div class="container">google</div></a> doing what you're currently doing in your code won't work — Ameer
– Ameer, Commented Aug 15, 2020 at 14:04

lukaszkups · Accepted Answer · 2020-08-15 14:04:14Z

In HTML structure, id must be unique, you can use class instead, but you need also then to loop through these items (snippet included below)

var elements = document.querySelectorAll(".container");

elements.forEach(el => {
  if (el.addEventListener) {
    el.addEventListener("click", function() {
      el.querySelector(".button").click();
    }, false);
  } else {
    el.attachEvent("onclick", function() {
      el.querySelector(".button").click();
    });
  }
});

.container {
  background: coral;
  padding: 32px;
  margin: 16px;
  cursor: pointer;
}

<div class="container">

  <a class="button" href="https://google.sk/">Google</a>

</div>

<div class="container">

  <a class="button" href="https://youtube.com/">Youtube</a>

</div>

<div class="container">

  <a class="button" href="https://facebook.com/">Facebook</a>

</div>

<div class="container">

  <a class="button" href="https://twitter.com/">Twitter</a>

</div>

I'm just curious - why you want to handle click with JavaScipt? You can instead handle this with:

<a href="google.sk">
  <div class="container">google</div>
</a>

Have you tried that approach instead?

Shiva_Adasule · Accepted Answer · 2020-08-15 14:08:20Z

0

Here is Code how to do it by using simple javascript function.

function gohere(url) {
    location.replace(url)
}

#container {
      background: coral;
      padding: 32px;
      margin: 16px;
      cursor: pointer;
}

<div onclick="gohere('https://google.sk/')" id="container">
    Google
</div>

<div onclick="gohere('https://youtube.com/')" id="container">
    Youtube
</div>

<div onclick="gohere('https://facebook.com/')" id="container">
    Facebook
</div>

<div onclick="gohere('https://twitter.com/')" id="container">
    Twitter
</div>

answered Aug 15, 2020 at 14:08

Shiva_Adasule

8593 gold badges10 silver badges15 bronze badges

Comments

Ariel Alves Dutra · Accepted Answer · 2020-08-15 14:10:04Z

You should not use a 'id' when you have more than one element on the page. Instead, is recommended to use css classes.

What you can do, is use document.querySelectorAll('.some-class-here') and then make an iteration in each element to apply an event listener of click.

About making the entire element clickable, I would use one of three approaches:

An option that I like is to have the padding in the button, so the button/link fills all of the space of the container, in a way that the entire container is clickable
Put the container inside the link
You would have to create a javascript function that will receive the element being clicked and read some data related to the element that will have the link, like data-link="http://google.com". With that data, you can use location to redirect or open in new table the link.

Collectives™ on Stack Overflow

Javascript: click on element instead of button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related