如何用JavaScript获取input元素数据？现有代码无法运行求助

问题分析 #

你当前代码里存在几个小问题导致无法正常获取输入框值：

• 变量命名混淆：把按钮元素命名为form，不仅语义错误，还容易引发逻辑混乱
• 监听按钮click事件不是表单提交的最优方式，表单交互更适合监听submit事件

修正方案 #

方案1：修复现有按钮点击逻辑

修正变量名，确保逻辑清晰：

window.onload = function () {
    // 修正变量名，明确是提交按钮
    const submitBtn = document.getElementsByClassName("form-submit")[0];
    console.log(submitBtn)

    if (submitBtn) {
        submitBtn.onclick = (event) => {
            event.preventDefault();
            // 获取输入框元素
            const phoneInput = document.getElementById('phoneInput');
            // 打印输入框值
            console.log(phoneInput.value);
        }
    }
};

方案2：更规范的表单submit事件监听（推荐）

直接监听表单的提交事件，更符合表单交互的标准逻辑：

window.onload = function () {
    const phoneForm = document.getElementById('phoneForm');
    if (phoneForm) {
        phoneForm.addEventListener('submit', (event) => {
            event.preventDefault();
            const phoneInput = document.getElementById('phoneInput');
            console.log(phoneInput.value);
        });
    }
};

额外提示 #

• 可以提前在全局或事件外部获取phoneInput元素，避免每次触发事件都重新查询DOM
• 输入框的pattern规则要求10位数字，测试时确保输入符合格式，避免浏览器默认的验证拦截

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