Why am i getting undefined in the console log instead of the input value?

July 12, 2022

I am trying to get the input value as my result but after clicking on the button I am getting ‘undefined’ as the console result. Please help to understand the reason. Sharing the HTML and js code

<!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>


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

>Solution :

Your div <div class="searchBox"> also contain a class "searchBox" so it selected that.

Fixed: Add an input selector after class selector.

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

<!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>