如何将 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();正在用调用overlayShow()的返回值覆盖现有的onclick属性(这是undefined，因为该函数缺少return语句(。

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

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

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

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

Answer 2

从 overlayShow((; 和 overlayHide((; 赋值中删除括号()，以便您分配函数而不是调用它。

你有这个...

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

document.getElementById("hide"(.onclick =overlayHide((;

让它成为这个...

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

document.getElementById("hide"(.onclick =overlayHide;

Answer 3

你的javascript没有做你认为它正在做的事情：

// You are calling overlayShow(), and assigning its result to "onclick" not assigning the function
document.getElementById("mkc").onclick = overlayShow();
// You are calling overlayHide(), and assigning its result to "onclick" not assigning the function
document.getElementById("hide").onclick = overlayHide();

所以这不起作用，因为您的脚本正在尝试调用一个函数并将其结果分配给onclick属性(因为您的函数不返回任何内容，因此它正在分配undefined(。

因此，只需正确分配它们：

// Notice no () on the right side of the equality
document.getElementById("mkc").onclick = overlayShow;
document.getElementById("hide").onclick = overlayHide;