如何在onload事件绑定按钮点击事件并实现姓名字段合并？

1. 绑定按钮点击事件 #

你当前的window.onload逻辑有误，直接调用displayFullName()只会在页面加载时执行一次，无法实现点击按钮触发的效果。需要在页面加载完成后，获取goButton元素并为其绑定click事件监听器，同时要移除按钮上错误的onclick=window.onload属性，避免冲突。

2. 合并并显示全名 #

你之前给fullName输入框赋值true的操作完全错误，正确做法是将fname和lname的输入值拼接（中间可加空格），再赋值给fullName的value属性。另外你已经定义了简化元素获取的$函数，建议直接使用来精简代码。

修正后的完整代码 #

<html>
    <head>
        <script>
        var $ = function(id) {
            return document.getElementById(id); 
        }
        function displayFullName() {
            // 获取两个输入框的值并拼接全名
            var fname = $("#fname").value;
            var lname = $("#lname").value;
            // 将拼接结果赋值给禁用的fullName输入框
            $("#fullName").value = fname + " " + lname;
        }
        window.onload = function() {
            // 为goButton绑定点击事件，触发displayFullName函数
            $("#goButton").addEventListener("click", displayFullName);
        }
        </script>
    </head>
    <body>
        <label>FIRST NAME</label><input type="text" id="fname" name="fname">
        <label>LAST NAME</label><input type="text" id="lname" name="lname">
        <input type="button" id="goButton" value="Submit">
        <input type="text" id="fullName" disabled>
    </body>
</html>

关键改动说明 #

• 移除按钮上无效的onclick属性，改用addEventListener动态绑定点击事件，更符合现代JS编码规范
• 在window.onload中完成事件绑定，确保DOM元素加载完成后再执行操作
• 在displayFullName函数中正确拼接输入值，并赋值给目标输入框的value属性
• 复用你定义的$函数，简化元素获取代码，提升可读性

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