CODEWITHSUNDEEP
javascripthtmlcss
Matúš Rebroš
Matúš Rebroš

Reputation: 145

Javascript: click on element instead of button

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>

Upvotes: 1

Views: 1577

Answers (3)

Ariel Alves Dutra
Ariel Alves Dutra

Reputation: 16

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:

  1. 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
  2. Put the container inside the link
  3. 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.

Upvotes: 0

Shiva_Adasule
Shiva_Adasule

Reputation: 839

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>

Upvotes: 0

lukaszkups
lukaszkups

Reputation: 5990

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?

Upvotes: 1

Related Questions