调用外部javascript文件时出现的问题

我有一个简单的HTML文件，其中包含一个列表和一个JS函数，单击该函数可以修改列表项的文本

当我将HTML和JS脚本放在同一个.HTML文件中时，代码可以工作，但我想将JS代码分开并放在一个外部的.JS文件中，当JS函数在文件中时，我似乎无法让它工作。
我在下面提供了HTML和JS代码

提前谢谢你

包含引用的js脚本的html代码如下（js文件位于同一目录中）：

改变

el.addEventListener("click", modifyText,false);

到

---

您有一个语法错误。在方法的末尾，您错过了一个结束的花括号。尝试更好地缩进代码，同时检查浏览器控制台是否有错误。这是一种很好的调试方法

<nav>
  <ul>
    <li id="homePage">Home</li>
    <li id="bookPage">Books</li>
    <li id="videoPage">Videos</li>
  </ul>
</nav>

<script src="navbar_listener.js"></script>

---

如果您的

.js

文件与

.html

位于同一文件夹中，它应该可以工作。你用什么样的服务器？它对我有用。请检查控制台中是否记录了任何错误。提供的代码运行良好。我为它编了一把小提琴。阿图尔是对的！！除此之外，还缺少modifyText的右括号。在你的.jsadd type=“text/javascript”中的最后一个else语句后面应该有一个结束括号，因为我在我的网站中整合了所有这些，我发现它是有效的。如果我将JS导入放在调用navbar.html的php块之后，JS函数就会工作。谢谢大家。

el.addEventListener("click", modifyText,false);

el.onclick= modifyText;

<nav>
  <ul>
    <li id="homePage">Home</li>
    <li id="bookPage">Books</li>
    <li id="videoPage">Videos</li>
  </ul>
</nav>

<script src="navbar_listener.js"></script>

function modifyText(){
  var t2 = document.getElementById("videoPage");
  if (t2.innerHTML == "Videos"){
    t2.innerHTML = "VideoCHANGE";
  } else {
    t2.innerHTML = "Videos";
  }
} // YOU MISSED THIS ONE.

// add event listener to t2
var el = document.getElementById("videoPage");
el.addEventListener("click", modifyText,false);