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

Issues calling external javascript file

本文关键字：问题 文件 外部 javascript 调用      更新时间：2023-09-26

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

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

提前感谢！！

我的html代码包含引用的js脚本如下（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);

更改

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>

和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);
相关文章：