Javascript：TypeError：无法将属性'onclick'设置为null [duplicate]

Question

此问题已经在这里有了答案：

Why does jQuery or a DOM method such as getElementById not find the element?（7个答案）

[<2小时前关闭。

我知道，有很多主题涉及该主题。但是我还没有弄清楚，为什么控制台仍然显示错误。

计划当我单击input#submit时，我希望main_jobBot.js从index.html切换到https://www.google.de/。摘要我正在尝试通过change事件调用函数btn.onclick。当我将OnClick事件放置在<input>标记内时，它工作正常。但是，当我直接将其放入main_jobBot.js时，出现以下错误：错误消息：

Uncaught TypeError: Cannot set property 'onclick' of null at main_jobBot.js:7

我有...

...已检查main_jobBot.js的链接。
• ...试图将脚本移到index.html的末尾，以确保已加载main_jobBot.js可能需要的每个元素。
• ...试图重命名我的所有组件，以确保没有偶然使用的默认变量或方法。
• ...仔细检查代码中是否存在输入错误。

注意：我绝对是Javascript和Stackoverflow的初学者！MAIN_JOBBOT.JS和INDEX.HTML

/* main_jobBot.js */

let btn = document.getElementById("submit");

function change() {
  location.replace("https://www.google.de/");
}

btn.onclick = change;

<!-- index.html -->

<input type="submit" value="Let J.A.B. find the Job!" id="submit">
</input>

最后编辑：现在我明白了！我必须删除#并将脚本移到HTML文件的结尾！

Answer 1

使用Javascript或任何其他语言在html中引用html元素时使用的任何字符，都可能影响代码的功能。从变量中删除#，这将起作用-哦，也只是一个建议，但是在更改url时，请尝试使用：

location.href="https://www.google.de/"

除了这真是太棒了，很棒的工作！

Answer 2

删除选择器#应该可以。您只能将选择器用于document.querySelector()或document.querySelectorAll()之类的方法。

/* main_jobBot.js */

let btn = document.getElementById("submit");

function change() {
  location.replace("https://www.google.de/");
}

btn.onclick = change;

<!-- index.html -->

<input type="submit" value="Let J.A.B. find the Job!" id="submit">
</input>

Answer 3

删除选择器#应该可以。您只能将选择器用于document.querySelector()或document.querySelectorAll()之类的方法。

/* main_jobBot.js */

let btn = document.getElementById("submit");

function change() {
  location.replace("https://www.google.de/");
}

btn.onclick = change;

<!-- index.html -->

<input type="submit" value="Let J.A.B. find the Job!" id="submit">
</input>