javascript - 现有函数不是函数？

Question

所以我正在做一个项目。我的功能运行良好，直到我突然点击了一个应该运行 download() 的按钮，但它没有运行。所以我打开控制台，看到了这个:

TypeError: download is not a function

我很困惑。我从控制台运行 download()，它工作正常。所以我认为这可能是 onclick 的问题(我的按钮有 onclick="download()")，所以我改用 JavaScript 添加点击事件。

$("#download").onclick=download()

注意:$() 是自定义的 jQuery 式函数，不使用框架本身。它在解决这个问题的同时还有很多其他用途。
但这也不管用。所以我也尝试使用

$("#download").addEventListener("click", download)

这又是行不通的。两次它都表示 $() 为 null。所以我冒险尝试使用

document.getElementById("download").onclick=download()

与 addEventListener() 相同。但这给了我一个非常令人惊讶的错误信息:

TypeError: document.getElementById(...) is null

我在控制台中重复了所有表达式，发现它们不为空。在页面加载几秒钟后，我才点击按钮。

相关代码如下:

function $(el){switch(el[0]){case"#":return document.getElementById(el.substring(1));break;case".":return document.getElementsByClassName(el.substring(1));break;default:return document.getElementsByTagName(el);break;}}

function download() {
	alert("download() executed")
}

// Attempted Scripts:
//$("#download").onclick = download()
//$("#download").addEventListener("click", download)
//document.getElementById("download").onclick = download()
//document.getElementById("download").addEventListener("click", download)

<a class = "nav-link nohighlight" id = "download" onclick = "download()">Download</a>

感觉我的网络浏览器只是试图确保我不运行该功能。我已经在最新的 Edge 和 Firefox 上对此进行了测试。你可以看我的全页here .

Answer 1

查看 script 标记在 HTML 中的位置:它在正文的上方。默认情况下，脚本会立即运行:当 HTML 解析器运行它们时，它会立即执行脚本，然后再继续解析 HTML 的其余部分。因此，在您的脚本运行时，尚未创建任何元素 - 因此，选择任何元素都将失败。

要么将整个脚本包装在 DOMContentLoaded 监听器函数中:

document.addEventListener('DOMContentLoaded', () => {
  // put your whole script here
});

或者给你的脚本标签 defer 属性，它指示解析器只在文档被完全解析后运行它:

<script src = "index.js" defer></script>