Html与Javascript：用户输入返回结果异常问题排查

Let's break down what's going wrong here and fix it step by step:

核心问题点 #

1. DOM加载顺序错误 #

你的脚本放在<head>标签里，浏览器会优先加载并执行它，此时<body>里的输入框、按钮和显示容器还没被渲染出来，导致document.getElementById获取的所有元素都是null。点击Save按钮时，insert()函数尝试操作这些null变量，直接报错，所以Chrome里没有任何反应。

2. InnerHTML被覆盖 #

在Show()函数中，你连续两次给messageBox.innerHTML赋值：

messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Single);
messageBox.innerHTML = mergeHandler(first_name,last_name,merge2Object);

第二次赋值会完全覆盖第一次的结果，所以你永远看不到合并为数组形式的姓名。

3. 对象直接转字符串导致显示异常 #

merge2Object返回的是包含对象的数组，当你把这个数组直接赋值给innerHTML时，JavaScript会自动把对象转换为字符串[object Object]，这就是JSbin里显示异常的原因。

4. 冗余的函数逻辑 #

merge2Single函数里先把单个名字push到数组再join，其实可以简化逻辑，直接返回拼接后的字符串。

修复后的完整代码 #

修改后的HTML（解决DOM加载问题） #

把脚本放在</body>标签前，确保DOM元素渲染完成后再执行脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>UI</title>
    <style>
        article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
    </style>
</head>
<body>
    <form>
        <h1>Please enter data</h1>
        <input id="fname" type="text" placeholder="First Name" />
        <input id="lname" type="text" placeholder="Last Name" />
        <input type="button" value="Save" onclick="insert()" />
    </form>
    <div id="display"></div>

    <!-- 把脚本移到body末尾 -->
    <script src="useMerge.js" type="text/javascript"></script>
</body>
</html>

修改后的useMerge.js（解决覆盖和对象显示问题） #

var first_name = [];
var last_name = [];
var fInput = document.getElementById("fname");
var lInput = document.getElementById("lname");
var messageBox = document.getElementById("display");

function insert() {
    first_name.push(fInput.value);
    last_name.push(lInput.value);
    Show();
}

function Show() {
    // 清空输入框
    fInput.value = "";
    lInput.value = "";
    // 清空显示容器
    messageBox.innerHTML = "";

    // 获取两种合并结果
    const singleResult = mergeHandler(first_name, last_name, merge2Single);
    const objectResult = mergeHandler(first_name, last_name, merge2Object);

    // 把结果转换成可读的HTML格式，避免覆盖
    messageBox.innerHTML += "<h3>合并为数组形式的姓名:</h3>";
    messageBox.innerHTML += singleResult.join("<br>"); // 每个结果换行显示

    messageBox.innerHTML += "<h3>合并为对象数组形式的姓名:</h3>";
    // 把对象数组转成JSON字符串，或者手动拼接成可读格式
    messageBox.innerHTML += JSON.stringify(objectResult, null, 2).replace(/\n/g, "<br>").replace(/  /g, "&nbsp;&nbsp;");
}

// 合并为单个字符串的函数（简化逻辑）
function merge2Single(first, last) {
    return `${first} ${last}`;
}

function mergeHandler(arr1, arr2, func) {
    var result = [];
    for(var i=0; i<arr1.length; i++){
        result.push(func(arr1[i], arr2[i]));
    }
    return result;
}

// 合并为对象的函数（去掉多余的数组包裹，因为mergeHandler会把结果push到数组里）
function merge2Object(first_name, last_name) {
    return { FirstName: first_name, LastName: last_name };
}

额外优化说明 #

• 我把merge2Object里的数组包裹去掉了，因为mergeHandler已经会把每个函数返回的结果push到数组里，原来的写法会导致结果变成[[{...}], [{...}]]这种嵌套数组，现在修正后是[{...}, {...}]的正确格式。
• 使用JSON.stringify并替换换行和空格为HTML标签，让对象数组的显示更美观易读。
• 用模板字符串简化了merge2Single的拼接逻辑，代码更清晰。

内容的提问来源于stack exchange，提问作者B.Uriah