练习用JavaScript全名拆分代码无法正常运行，求排查解决

我帮你排查出了代码里的几个关键问题，咱们来一步步修正：

问题点分析 #

• 字符串长度获取错误：你写的len = str.len;是错的，JavaScript里字符串的长度属性是length，应该改成len = str.length;
• DOM操作不完整：代码最后document.getEl...没写完，需要完整调用document.getElementById来把结果插入到页面里
• 输出逻辑小问题：原代码里"Hello Mr."+str会把全名重复输出，应该改成用提取出的姓氏last才合理
• 可选优化：可以加个判断，处理输入里没有空格的情况，避免程序报错

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>姓名拆分练习</title>
</head>
<body>
    <input type="text" id="box" placeholder="输入你的全名（名 姓）">
    <button onclick="handling()">提交</button>
    <div id="output"></div>

    <script>
        function handling() {
            var str = document.getElementById("box").value;
            // 修正长度获取
            var len = str.length;
            var spaceIndex = str.indexOf(" ");
            
            // 处理没有空格的情况
            if (spaceIndex === -1) {
                document.getElementById("output").innerHTML = "请输入包含空格的全名（名 姓）";
                return;
            }

            var firstName = str.substr(0, spaceIndex);
            // 简化姓氏提取，substr只传起始位置就会取到字符串末尾
            var lastName = str.substr(spaceIndex + 1);
            
            var output = `Hello Mr.${lastName}<br>Your first name is ${firstName}<br>Your last name is ${lastName}`;
            // 完整的DOM赋值操作
            document.getElementById("output").innerHTML = output;
        }
    </script>
</body>
</html>

额外说明 #

• 我把变量名改成了更语义化的firstName、lastName、spaceIndex，这样代码可读性更好
• 提取姓氏的时候，str.substr(spaceIndex + 1)不需要第二个参数，因为不传的话会自动取到字符串的最后一位，比计算len-toS-1更简洁
• 加了输入校验，如果用户没输入空格，会给出提示，避免程序出错

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