调用外部JavaScript文件时出现问题

Question

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

当我在同一.html文件中包含HTML和JS脚本时，该代码有效，但是我想将JS代码分开并将其放入外部.js文件中，而我似乎无法使JS函数正常工作在文件中时。
我在下面提供了HTML和JS代码。

先感谢您！！

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

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

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

在navbar_listener.js中找到的代码如下：

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

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

Answer 1

更改

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

至

el.onclick= modifyText;

Answer 2

您有语法错误。 您错过了方法结尾的大括号。 尝试使代码缩进更好，并检查浏览器控制台中是否有错误。 这是调试的好方法。

<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文件：

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);