JavaScript表单提交返回Undefined问题排查求助

我正在复刻一个JavaScript词典API项目，原视频使用按钮的click事件实现搜索功能，我尝试改用form的submit事件监听器，但点击按钮或按回车时，始终获取到undefined的输入值。之前做待办事项项目时也曾遇到过类似的事件问题，现在想彻底搞清楚原因，提升编程能力，求各位帮忙解答！

相关代码 #

HTML

<div class="container">
    <form>
        <input type="text" name="input" class="text" placeholder="Type Text Here">
        <button class="search-button">Search</button>
    </form>

    <div class="result">
        <h1>Text</h1>
        <button class="button-sound">
            <i class="fa-solid fa-volume-high"></i>
        </button>
    </div>

    <div class="answers">
        <p class="type-of">noun</p>
        <h1 class="meaning">Sample text</h1>
        <h1 class="other-meaning">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, voluptatum quae! Iure, sunt provident nihil ducimus minima ab quaerat eaque 
            maiores ad culpa. Totam dolorem quam quod magni, dicta veniam!
        </h1>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins';
    background-color: #A1CCD1;
}

.container {
    padding: 35px;
    background-color: antiquewhite;
    height: 600px;
    width: 500px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

form {
    padding-bottom: 30px;
}

input {
    padding: 20px;
    font-size: 20px;
    color: #302f2fbd;
    border: none;
    width: 75%;
}

input:focus {
    outline: none;
    color: #302f2fbd;
}

.search-button {
    font-size: 20px;
    padding: 19.1px;
    border: none;
    cursor: pointer;
    background-color: antiquewhite;
}

.search-button:focus {
    background-color: #ffff;
    transition: 0.3s;
}

.result {
    display: flex;
    justify-content: space-between;
    margin: 25px;
}

.result h1 {
    font-size: 40px;
    font-weight: bold;
}

.result button {
    font-size: 40px;
    border: none;
    background-color: antiquewhite;
    cursor: pointer;
}

.answers {
    margin: 30px;
}

.answers h1 {
    font-size: 15px;
    font-weight: bold;
    margin: 30px 0;
}

.answers .other-meaning {
    font-size: 17px;
}

JavaScript（原错误代码）

const inputEl = document.querySelector('form');
// const buttonEl = document.querySelector('.search-button')
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';


inputEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = inputEl.value;

    console.log(input)

    fetch(`${url}${input}`)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })

});

问题原因 #

你代码里的核心错误是：inputEl是form元素，而form元素本身并没有value属性，所以inputEl.value自然会返回undefined。你需要获取的是form内部的input输入框的值，而不是form元素的value。

解决方法 #

这里提供三种可行的修改方式，任选其一即可：

方法1：直接获取input元素

直接选中input输入框，在submit事件里读取它的value：

const formEl = document.querySelector('form');
const inputField = document.querySelector('.text'); // 通过class选中input
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';

formEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = inputField.value.trim(); // 顺便去掉前后空格

    if (input) { // 空输入时避免无效请求
        console.log(input);
        fetch(`${url}${input}`)
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        });
    }
});

方法2：通过form的elements属性获取

利用form元素的elements集合，通过input的name属性（你的input name是input）来获取值：

const inputEl = document.querySelector('form');
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';

inputEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = inputEl.elements.input.value.trim(); // 用name属性定位input

    console.log(input);
    if (input) {
        fetch(`${url}${input}`)
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        });
    }
});

方法3：使用FormData对象

用FormData来解析表单数据，适合表单有多个输入项的场景：

const inputEl = document.querySelector('form');
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';

inputEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(inputEl);
    const input = formData.get('input').trim(); // 通过name获取对应值

    console.log(input);
    if (input) {
        fetch(`${url}${input}`)
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        });
    }
});

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