document.getElementById无法找到按钮ID，onClick绑定函数失效求助

你的代码存在两个核心问题导致点击功能失效：

1. DOM加载顺序错误 #

JS脚本放在<head>标签中时，浏览器解析到脚本时，<body>内的表单元素还未完成渲染，此时document.getElementById("button1")和document.getElementById("fname")会返回null，无法完成事件绑定。

2. 事件绑定写法错误 #

你写的document.getElementById("button1").onclick = myFunction();中，myFunction()是立即执行函数，会直接调用函数并将返回值（此处为undefined）赋值给onclick，而非把函数本身绑定为点击事件处理函数。

修正后的代码 #

HTML部分 #

将JS脚本移至<body>末尾，确保DOM元素加载完成后再执行JS：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Simple Forms</h1>
    <form>
        <input type="text" id="fname">
        <button type="button" id="button1">Send</button>
        <br>
        <input type="text" id="response">
    </form>
    <!-- 移至body末尾，保证DOM已渲染 -->
    <script src="simplejava.js"></script>
</body>

</html>

JS部分 #

修改事件绑定方式，去掉函数后的括号：

console.log("simplejava loaded correctly");
console.log(document.getElementById("button1"));
console.log(document.getElementById("fname"));
// 去掉括号，绑定函数本身而非执行结果
document.getElementById("button1").onclick = myFunction;
function myFunction() {
    let name = document.getElementById("fname").value;
    document.getElementById("response").value = "Hi " + name;
    if(name == "John")
    {
        alert("Hello "+name)
    }
}

额外补充：使用submit按钮的解决方案 #

如果想换回submit按钮，只需阻止表单默认提交刷新行为即可：

<form id="myForm">
    <input type="text" id="fname">
    <button type="submit">Send</button>
    <br>
    <input type="text" id="response">
</form>

对应JS代码：

document.getElementById("myForm").addEventListener("submit", function(e) {
    // 阻止表单默认刷新行为
    e.preventDefault();
    let name = document.getElementById("fname").value;
    document.getElementById("response").value = "Hi " + name;
    if(name == "John") {
        alert("Hello "+name);
    }
});

内容的提问来源于stack exchange，提问作者gogosimba