点击按钮后控制台输出undefined而非输入值，原因是什么？

你尝试获取输入框内容，但点击按钮后控制台输出undefined，相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="movie-search-engine.css">
    <script src="scripts/movie-search-engine.js" defer></script>
    <title>Movie Search Engine</title>
</head>
<body>
    <div class="searchBox">
        <input type="text" class="searchBox" placeholder="Movie Name">
        <button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
    </div>
    <div class="movieDetails">
        <h2 class="movieTitle">Movie Title</h2>
        
        <div class="movieData">
            <p class="yearofRelease">Year of Release</p>
            <p class="movieTitle">Movie Title</p>
            <p class="genre">Genre</p>
            <p class="director">Director</p>
            <p class="plot">Plot</p>
        </div>
</body>
</html>

JS代码 #

const moviesearchEngine=()=>{
    let searchBox = document.querySelector('.searchBox');
    console.log(searchBox.value)
}

核心原因 #

你的代码中，父容器<div class="searchBox">和输入框<input class="searchBox">共用了searchBox这个类名。document.querySelector('.searchBox')的特性是返回页面中第一个匹配该选择器的DOM元素，所以这里拿到的是外层的div容器，而div元素并没有value属性，因此控制台输出undefined。

解决方案 #

方案1：给输入框设置唯一类名 #

修改HTML中输入框的类名，避免和父容器重复：

<input type="text" class="searchInput" placeholder="Movie Name">

对应JS修改选择器：

const moviesearchEngine=()=>{
    let searchBox = document.querySelector('.searchInput');
    console.log(searchBox.value)
}

方案2：精确选择输入框 #

通过父容器定位到内部的输入框，不用修改类名：

const moviesearchEngine=()=>{
    let searchBox = document.querySelector('.searchBox input');
    console.log(searchBox.value)
}

方案3：使用ID选择器（推荐，查询效率更高） #

给输入框添加唯一ID：

<input type="text" id="searchInput" class="searchBox" placeholder="Movie Name">

JS中用ID选择器获取元素：

const moviesearchEngine=()=>{
    let searchBox = document.getElementById('searchInput');
    console.log(searchBox.value)
}

内容的提问来源于stack exchange，提问作者Mohammad Mustak Absar Khan