javascript - 如何将 HTML 脚本函数传输到外部 JavaScript 文件？

Question

我目前正在构建一个网站，其中应包含一个可选位置列表。在选择时，有一个从左到右的叠加平移。我希望能够将列表中的位置值发送到我的脚本，以便我可以将特定图像加载到叠加层。

每次我将函数从 HTML 文档移动到我的 .js 时，这些函数似乎永远不会被调用。 (这是我的第一个网络开发元素)。

document.getElementById("mkc").onclick = overlayShow();
document.getElementById("hide").onclick = overlayHide();

function overlayShow() {
  document.getElementById("overlay").className += " show";
}

function overlayHide() {
  document.getElementById("overlay").classList.remove("show");
}

<div>
  <div id="list">
    <a onclick=>Birstall</a>
    <a id="mkc" onclick="overlayShow()">Milton Keynes: C wing</a>
    <a id="MKB" onclick="overlayShow()">Milton Keynes: B wing</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
</div>

<div class="main">
  <div id="overlay" class="overlay">
    <div class="content">
      <button id="hide" onclick="overlayHide()">hide</button>
    </div>
  </div>
</div>

该功能适用​​于包含的第二个脚本，但是当我将这些功能移到 index.js 中时，它不起作用。

提前致谢。

Answer 1

document.getElementById("mkc").onclick = overlayShow(); 正在用来自的返回值覆盖现有的 onclick 属性调用 overlayShow()(未定义，因为该函数缺少 return 语句)。

从 HTML 中删除属性并分配函数，而不是从 JS 中调用函数的结果。

document.getElementById("mkc").onclick = overlayShow;

更好的是，切换到现代的 addEventListener:

document.getElementById("mkc").addEventListener("click", overlayShow);