onClick not working for my button

Question

I'm creating a website where I'll be displaying my work. Then I noticed that I needed a Cookie Notice. Because I want to make it 100% by myself (without generators, etc.) I started creating it. The Cookies themselves are working fine, but main.js is not registering the button's onClick.

Here's the code:

var acceptButton = document.getElementById("cookieAccept");
acceptButton.onclick = function() {
    alert("HELLO");
}

My button's code:

<button id="cookieAccept" class="cookieButton">Accept</button>

I've been Googling a lot, searching through StackOverflow, etc. There are no answers that worked for me (yet). Here are the solutions I tried:

jQuery
object.onclick = function() {}
object.addEventListener("click", false);
Put the object.addEventListener("click", false) inside of window.onload

Any hints/help? - XaafCode

EDIT

Console error:

Uncaught TypeError: Cannot set property 'onclick' of null

Create a snippet please. It is probably that you are trying to run the script before the DOM is loaded. — Cristian S., May 22 '18 at 14:07
Are you loading it before the element is added to the page? My guess is yes and the console should have an error message stating that acceptButton is null or undefined — epascarello, May 22 '18 at 14:11
Please create a [mcve] demonstrating your problem as the code you have provided works: https://jsfiddle.net/zws7zd57/# — Pete, May 22 '18 at 14:17
I've edited my post. @Pete that's the weird thing. Whenever I try it in jsfiddle for example, or on the w3schools try-it-yourself page it *does* work. — Xaaf Code, May 22 '18 at 14:19
@XaafCode sounds like you are not wrapping your code in a document ready - if you use fiddle, it wraps your js in a document ready which means that the js is loaded AFTER all the elements are ready in the dom - try moving your script tags to the end of the page - just before the closing body tag and see if that makes a difference — Pete, May 22 '18 at 14:21
possible duplicate of https://stackoverflow.com/questions/37846803/why-is-a-dom-element-null — Pete, May 22 '18 at 14:24

score 0 · Accepted Answer · answered May 22 '18 at 15:00

The possible reason in this case would only be is.

This will work

 <button id="cookieAccept" class="cookieButton">Accept</button>
    <script>
    var acceptButton = document.getElementById("cookieAccept");
    acceptButton.onclick = function() {
        alert("HELLO");
    }
    </script>

Make sure you don't have Js before html is written. First html then Js. Also make sure you don't have two id of same name . This may some time create problem.

This will not work

   <script>
    var acceptButton = document.getElementById("cookieAccept");
    acceptButton.onclick = function() {
        alert("HELLO");
    }
    </script>
    <button id="cookieAccept" class="cookieButton">Accept</button>

score 0 · Answer 2 · answered Jan 14 '19 at 11:13

Be sure to wrap your js code in a function that you'll register to be executed once the browser sets up all the html:

window.onload = function() {
    var acceptButton = document.getElementById("cookieAccept");
    acceptButton.onclick = function() {
        alert("HELLO");
    }
}

Cfr.: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

score 0 · Answer 3 · answered Jan 14 '19 at 11:50

0

Remember to put HTML code before Javascript syntax under tag.

answered Jan 14 '19 at 11:50

anshul

661
9
27

onClick not working for my button

3 Answers3