Javascript map函数正确使用求助：点击按钮无法获取输入框信息

核心错误点 #

• HTMLCollection无法直接调用map：document.getElementsByTagName("input")返回的是类数组结构的HTMLCollection，并非原生数组，没有内置的map方法，必须先转换为真正的数组才能使用该方法。
• 变量名冲突导致逻辑错误：Click函数的参数是点击的按钮对象，但原代码在map的条件判断里误用了x.id（此时x是map遍历到的输入框元素），实际应该判断的是点击按钮的id，以此选择对应的处理逻辑。
• 未声明变量存在全局污染风险：input = ...未使用const/let声明，会自动成为全局变量，可能引发意外的变量覆盖问题。

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <script>
            const getID = (x) => x.id;
            const getText = (x) => x.value;
            function Click(btn) {
                // 将类数组的HTMLCollection转换为原生数组
                const inputs = Array.from(document.getElementsByTagName("input"));
                // 根据点击按钮的id选择对应的处理函数
                const result = inputs.map(btn.id === "id" ? getID : getText);
                alert(result);
            }
        </script>
    </head>
    <body>
        <input type="text" id="input1">
        <input type="text" id="input2">
        <button id="id" onclick="Click(this)"> ID </button>
        <button id="text" onclick="Click(this)"> Text </button>
    </body>
</html>

额外细节优化 #

• 把输入框的type="input"修正为type="text"，HTML中没有input这个输入框类型，text是文本输入框的标准类型。
• 移除了多余的</input>闭合标签，input属于自闭合元素，无需额外闭合。
• 使用const声明所有变量，符合ES6变量声明规范，避免全局作用域污染。

内容的提问来源于stack exchange，提问作者Pravin Kumar Raja