JavaScript 表单提交中获取输入值的常见错误解析

碧海醫心 2026-01-14 00:00:00 次阅读

本文详解为何在监听表单 submit 事件时 `form.value` 返回 undefined，并指出正确做法：必须通过 `input` 元素而非 `form` 元素获取用户输入值。

在 JavaScript 表单处理中，一个高频误区是误以为

。你原始代码中：

const inputEl = document.querySelector('form'); // ❌ 命名误导：实际选中的是 form 元素
const input = inputEl.value; // ❌ form 没有 value 属性 → undefined

这导致无论点击按钮还是回车提交，input 始终为 undefined，最终请求 URL 变成 https://api.dictionaryapi.dev/api/v2/entries/en/undefined，自然无法获取有效数据。

✅ 正确做法是分离职责：

用 document.querySelector('form') 获取表单，用于监听 submit 事件（支持回车 + 点击双触发）；
用 document.querySelector('input') 或更健壮的方式（如 form.querySelector('input')）精准定位输入框并读取其 .value。

优化后的推荐写法（增强健壮性）：

const formEl = document.querySelector('form');
const inputEl = formEl.querySelector('input[type="text"]'); // 明确类型，避免误选
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';

formEl.addEventListener('submit', (e) => {
    e.preventDefault();

    const searchTerm = inputEl.value.trim(); // ✅ 正确获取输入值，并去除首尾空格

    // 防止空搜索
    if (!searchTerm) {
        console.warn('请输入有效单词');
        return;
    }

    console.log('搜索词:', searchTerm);

    fetch(`${url}${encodeURIComponent(searchTerm)}`)
        .then(response => {
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            return response.json();
        })
        .then(data => {
            console.log('API 响应:', data);
            // ✅ 此处可添加渲染逻辑，如更新 .meaning 元素内容
        })
        .catch(err => {
            console.error('请求失败:', err);
            // 可在此处显示错误提示（如“未找到该单词”）
        });
});