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

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

在 javaScript 中，

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

，并在 submit 回调中从 input 元素读取 .value：

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 = '未找到该单词';         }); });

? 关键注意事项：

立即学习“Java免费学习笔记（深入）”；

• 使用 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 元素职责分离的关键一步：表单负责提交行为，输入控件负责承载数据。