Question

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

当我在同一个.html文件中包含HTML和JS脚本时代码有效，但我想将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);

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

调用外部javascript文件的问题

2 个答案: