我的Javascript没有'当我把一个脚本元素放在头上从URL加载它时，它不起作用

My Javascript doesn't work when I put a script element in the head to load it from a URL

本文关键字：在头上 元素 脚本 加载 不起作用 一个 URL 没有 Javascript 我的      更新时间：2023-09-26

我已经为一个简单的内联函数编写了代码，但当我创建一个单独的js.file时，由于某种原因，它不想工作。我试过所有感觉，但也许我疲惫的眼睛什么都做不到！

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="menu.js"></script>
  </head>
 <body>
<div class="container">
  <button name="one">Button 1</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>
<div class="container">
  <button name="two">Button 2</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>
<div class="container">
  <button name="three">Button 3</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>

这个想法是有三个按钮，当你点击其中一个按钮时，只有一个div会显示，另外两个会被隐藏。

以下是JavaScript（在内联中运行得非常好）：

var first_container = document.querySelectorAll(' div:not(:first-child) p');
for (var i = 0; i < first_container.length; i++) {
  first_container[i].style.visibility = 'hidden';
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', clickHandler);
}
function clickHandler(e) {
  e.preventDefault();
  var text = document.querySelectorAll('p');
  for (var i = 0; i < text.length; i++) {
      if (text[i] === event.target.nextElementSibling) {
          text[i].style.visibility = 'visible';
      } else {
          text[i].style.visibility = 'hidden';
      }
  }
}

当您将脚本放在外部文件中，然后从<head>加载该外部脚本时，它会在DOM准备好之前加载。这意味着，如果脚本试图像使用document.querySelectorAll()一样引用页面中的元素，那么这些元素将不存在。

解决这个问题的简单方法是简单地移动脚本标记：

<script type="text/javascript" src="menu.js"></script>

至CCD_ 3的正前方。然后，在脚本运行之前，页面的所有元素都将被解析并在DOM中：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
 <body>
<div class="container">
  <button name="one">Button 1</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>
<div class="container">
  <button name="two">Button 2</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>
<div class="container">
  <button name="three">Button 3</button>
  <p>
    Lorem ipsum dolor sit amet
  </p>
</div>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>

或者，您可以使用一个脚本，该脚本将在DOM准备就绪时通知您，然后您可以调用代码。

如果你想把代码放在<head>部分，或者让代码可以放在任何地方，请参阅这篇参考文章和高度投票的答案，了解一种简单的Javascript和跨浏览器的等待方式，直到DOM准备好。

尝试javascript的onload()事件。之所以会发生这种情况，是因为当您在<head>..</head>中添加脚本时，甚至在加载网页之前，脚本就立即开始工作。因此，要处理此问题，您需要确保脚本在页面完全加载后开始工作。为此，在window.onload = function(){ //here your code goes }; 中完成页面加载后，编写您需要工作的javascript代码或函数

更新菜单.js文件如下：

javascript: menu.js

window.onload = function(){
    // your javascript code goes here...
};

引用：加载（）

当您将脚本从内联移动到外部时，还将脚本标记移动到<head>。

现在，脚本在任何与div:not(:first-child) p匹配的元素存在之前运行，因此first_container中没有任何元素

将脚本元素移回以前的位置。

或者，将您的代码移动到一个函数中，然后在加载文档后运行该函数（例如，使用addEventListener('load', your_function)）。

相关文章：