How to make an entire div clickable

Question

Basically what i have done is, i have made a web advert in after effects and i am looking to put it in HTML, If the user clicks on my ad, they get taken to a companion website of your choice. So i want the entire div that its in to be clickable and to make it link to another site. using javascript.



    <!-- Meta -->
    <meta charset="UTF-8" />
    <title>Bodymovin Demo</title>

    <!-- Styles-->
    <style>
        #bm{max-width: 970px:margin: 0 auto;}
     </style>

</head>
<body>

    <div id="bm"></div>





    <!-- Scripts -->
    <script src="lottie.js"></script>
    <script src="anim.js"></script>

The expected result is once you click on the web advert, you are directed to another site.

you can add the `onclick=""` method on the div and trigger an event (like linking to another site) For your situation should be `onclick="window.location.href="http://yourwebsite.com"` — Facyo Kouch, Oct 21 '19 at 09:53
[When we have exhausted our own knowledge, it’s often tempting to simply ask someone else to solve the problem for us. It is very common to find the question we have is one many people have already experienced, and many of these people have already asked about it and have received correct answers in response. Because of the vast amount of information on the internet and Stack Overflow, it often takes just a simple search or two to find them.](http://idownvotedbecau.se/noresearch/) — Liam, Oct 21 '19 at 09:54
https://stackoverflow.com/questions/20772954/add-click-event-on-div-tag-using-javascript — Amanjot Kaur, Oct 21 '19 at 10:05

score 2 · Accepted Answer · answered Oct 21 '19 at 10:06

You can use the following Javascript:

<script>
    const adv_div = document.querySelector('#bm');
    const adv_url = 'https://www.google.com';
    adv_div.addEventListener(
        'click',
        () => {
            window.open(adv_url);
        }
    );
</script>

To change the cursor to a hand(pointer) when you hover on the element use this CSS:

#bm {
    cursor: pointer;
    max-width: 970px;
    margin: 0 auto;
}

score 0 · Answer 2 · answered Oct 21 '19 at 09:52

0

Put it inside anchor tag

<a href="link"> 
    <div id="bm"></div> 
</a>

answered Oct 21 '19 at 09:52

Himanshu Poddar

7,112
10
47
93

Somebody downvoted this answer, although [this is perfectly fine](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element) and certainly better than relying on JavaScript. – str Oct 21 '19 at 09:58
I didn't downvote it but, i need java script as it is apart of the assignment to do it that way. – 00 11 Oct 21 '19 at 10:02
oh so its an assignment question!!! – Himanshu Poddar Oct 21 '19 at 10:03
Correct, i apologise for the confusion – 00 11 Oct 21 '19 at 10:04

score 0 · Answer 3 · answered Oct 21 '19 at 09:52

Just create an onclick function on the div. Whenever there is a click inside the div the function will be called

function a()
{
console.log("Div clicked")
}

#bm {
  max-width: 970px:margin: 0 auto;
}

<div id="bm" onclick="a()">dfsfsdfsd sdfsdf sdfsd fsd fs dfsd
</div>

How to make an entire div clickable

3 Answers3