Estoy tratando de obtener el valor de entrada como mi resultado, pero después de hacer clic en el botón obtengo 'indefinido' como resultado de la consola. Por favor ayuda a entender la razón. Compartir el código HTML y js
<!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) }Está utilizando una clase para varios elementos, por lo que se muestra indefinido. Entre muchas maneras, discutiré dos aquí, debe usar índices con clases si usa queryselector para obtener el elemento correcto o usar una ID para seleccionar el elemento de entrada. Aquí he usado ID para obtener el cuadro de búsqueda de entrada. Ver el siguiente código:
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>Su div <div class="searchBox"> también contiene una clase "searchBox", por lo que seleccionó eso.
Corregido: agregue un selector de entrada después del selector de clase.
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>