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語法之前的標記下。