JavaScript 表单提交中获取输入值失败的常见原因与解决方案

本文详解为何监听表单 submit 事件时 `form.value` 返回 undefined，并指出正确做法是通过独立获取 input 元素来读取用户输入，附带可运行代码示例与关键注意事项。

在 JavaScript 中，

const inputEl = document.querySelector('form'); // ❌ 变量名误导：实际选中的是 form 元素
const input = inputEl.value; // ❌ form 没有 value，始终为 undefined

const formEl = document.querySelector('form');
const inputEl = document.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(res => {
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            return res.json();
        })
        .then(data => {
            console.log('API 响应:', data);
            // ✅ 此处可添加渲染逻
辑（如更新 .meaning 元素）
        })
        .catch(err => {
            console.error('请求失败:', err);
            // ✅ 可显示错误提示给用户，例如：document.querySelector('.meaning').textContent = '未找到该单词';
        });
});

? 关键注意事项：

• 使用 encodeURIComponent() 对输入进行编码，避免空格、特殊字符（如 hello world → hello%20world）导致 API 请求失败；
• 始终检查 input.value.trim() 是否为空，防止发送空请求；
• 推荐为 input 添加 id="search-input" 并用 document.getElementById('search-input') 获取，语义更清晰、性能略优；
• 若表单含多个 input，务必明确指定目标元素（如 form.querySelector('input[name="word"]')），避免歧义。

掌握这一基础概念，不仅能解决字典 API 项目的问题，更是理解 DOM 元素职责分离的关键一步：表单负责提交行为，输入控件负责承载数据。