I'm trying to get input from an input field. Such that when the user clicks a button, a JS function is called and the user input is used therein.
This is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- contents of head here -->
<script src="./src/main.js" type="module"></script> />
</head>
<body>
<header>
<form id="form">
<input type="text" id="search" class="search" placeholder="Search TMDB" required>
<input type="button" id="search_btn"" class="search_btn" value="Search"/>
</form>
</header>
</body>
</html>
<!-- written by invalidrishav -->
The main.js mentioned in the script tag is as follows:
// other imports here
import { key } from './Api.js';
// other functions here
function search() {
var input = document.getElementById("search_btn");
console.log(input);
window.open(`https://api.themoviedb.org/3/search/movie?api_key=${key}&query=${input}`,
"TMDB", "menubar=1,resizable=1,width=500,height=500");
}
But when I click the search_btn button, this is what I get in console:
<input type="button" id="search_btn"" class="search_btn" value="Search" >
Also, it is not throwing any error in the console. How do I take the value of the user input?