Question

当我从一个单独的文件加载javascript时，它无法正常工作，但是当我从pa中加载相同的脚本时

var button = document.querySelector("button");
	var p = document.querySelector("p");
	button.addEventListener("click",function(){
		p.textContent = "Someone Clicked";
	});

<!DOCTYPE html>
<html>
	<body>
	<script type="text/javascript" src="listen.js"></script>
		<a href="https://www.google.co.in">My Link</a>
		<img src="logo.png">
		<button>Click Me</button>
		<p>No one Has Clicked yet!</p>
	</body>
</html>

ge它工作正常。

Answer 1

您正在标题中加载js文件，并选择当时不存在DOM的按钮和p标记。您可以像下面这样在页面底部加载脚本：

 `<body>
    <a href="https://www.google.co.in">My Link</a>
    <img src="logo.png">
    <button>Click Me</button>
    <p>No one Has Clicked yet!</p>
    <script type="text/javascript" src="listen.js"></script>
  </body>`

或者您可以将您的脚本放在window.onload（）函数中。它将等待页面加载，然后它将运行您的代码。

window.addEventListener('load', function () {
    var button = document.querySelector("button");
    var p = document.querySelector("p");
    button.addEventListener("click",function(){
      p.textContent = "Someone Clicked";
    });
}, false);

从其他页面加载时，JavaScript无法正常工作

1 个答案: