onClick不适合我的按钮

Question

我正在创建一个网站来展示我的作品。 然后我注意到我需要一个Cookie通知。 因为我想自己制作100％（没有生成器等），所以我开始创建它。 Cookies本身运行正常，但是main.js没有注册按钮的onClick。

这是代码：

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

我按钮的代码：

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

我已经在谷歌上搜索了很多东西，通过StackOverflow进行搜索，等等。目前还没有找到适合我的答案。 这是我尝试的解决方案：

• jQuery的
• object.onclick = function() {}
• object.addEventListener("click", false);
• 将object.addEventListener("click", false)放在window.onload内部

有任何提示/帮助吗？ -XaafCode

编辑

控制台错误：

Uncaught TypeError: Cannot set property 'onclick' of null

Answer 1

在这种情况下，可能的原因仅仅是。

这会起作用

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

确保在编写html之前没有Js。 首先是html，然后是Js。 另外，请确保您没有两个同名的ID。 这可能会在一段时间内造成问题。

这行不通

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

Answer 2

确保将js代码包装在一个功能中，该功能将在浏览器设置完所有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

Answer 3

切记将HTML代码放在Javascript语法之前的标记下。