javascript onclick evnt不起作用

Question

我正在嘗試從這里學習JavaScript。 正如這里所說的，我有以下main.js文件，它將更改背景顏色，但是當我單擊按鈕時沒有任何反應：-

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

和index.html文件：-

<!DOCTYPE html>
<html>
<head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
    <script src="main.js"></script>
</head>
<body>

    <button>Dont click</button>
    <p id="p1" > om !!!!</p>

</body>
</html>

當我打開這個Firefox並單擊按鈕時，什么都沒有發生，請幫助我:(

Answer 1

問題是您的腳本是在DOM加載之前加載的，因此當您的JavaScript添加事件處理程序時，您的按鈕不存在。 由於DOM解析是同步的（順序執行，一次執行一行），因此可以通過將腳本標簽添加到HTML底部</body>標簽上方的腳本標簽來解決此問題。 這是相當普遍的做法。

<html>
  <head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
  </head>
  <body>
    <button>Dont click</button>
    <p id="p1" > om !!!!</p>
    <script src="main.js"></script>
  </body>
</html>

還有一個名為defer的屬性，用於腳本標簽將完成相同的操作。 它強制腳本標記最后加載，您可以像這樣使用它：

<html>
  <head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <button>Dont click</button>
    <p id="p1" > om !!!!</p>
  </body>
</html>

Answer 2

避免此類問題的最佳方法是將事件DOMContentLoaded綁定為等待DOM完全加載和解析。

 document.addEventListener('DOMContentLoaded', function() { console.log("DOM is fully loaded and ready for DOM manipulation."); var btn = document.querySelector('button'); function bgChange() { function random() {return '0';} // Just to illustrate! var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } btn.onclick = bgChange; });

 <button>Dont click</button> <p id="p1"> om !!!!</p>

DOMContentLoaded事件

當初始HTML文檔已完全加載和解析時，無需等待樣式表，圖像和子幀完成加載，就會觸發DOMContentLoaded事件。 完全不同的事件加載應僅用於檢測頁面已滿。 在DOMContentLoaded更合適的地方使用負載是一個非常普遍的錯誤，因此要謹慎。

Answer 3

為什么不只是

<button id="yey">Dont click</button>

和

var btn = document.getElementById("yey");

javascript onclick evnt不起作用

問題描述

3 個解決方案

解決方案1
3 已采納 2018-02-23 14:58:37

解決方案2
1 2018-02-23 15:11:58

DOMContentLoaded事件

解決方案3
0

javascript onclick evnt不起作用

問題描述

3 個解決方案

解決方案1 3 已采納 2018-02-23 14:58:37

解決方案2 1 2018-02-23 15:11:58

DOMContentLoaded事件

解決方案3 0

解決方案1
3 已采納 2018-02-23 14:58:37

解決方案2
1 2018-02-23 15:11:58

解決方案3
0