Why am i getting undefined in the console log instead of the input value?
Question
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)
}
2 answers
solution1
3 ACCPTED 2022-07-12 05:35:20
You are using a class for multiple elements which is why undefined is shown. Among many ways, I will discuss two here, you have to either use indices with classes if using queryselector to get the correct element or use an ID to select the input element. Here I have used ID to get the input searchbox. See the following code:
const moviesearchEngine = () => { let searchBox = document.querySelector('#searchBoxInput'); 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" id="searchBoxInput" 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>
solution2
0 2022-07-12 05:33:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.