How to input search query to get required image from JSON data?

I am currently building a web app using TMDB API when I type any movie name it should display me the poster of required movie. I am not getting how to search the required movie and get the URL of the poster. Links ->https://developers.themoviedb.org/3/movies/get-movie-images and https://developers.themoviedb.org/3/configuration/get-api-configuration

My code:

<html>
<head>
    <title>Test app</title>
    <style type="text/css">
        #fetch{
            position: absolute;
            text-align: center;
            left: 450px;
            top: 35px;
        }
    </style>
</head>
<body>

<form name="fetch-movie-title" id="fetch">
     <input type="text" placeholder="Enter a movie title" id="term" />
     <input type="submit" onclick="showdata()" id="search" value="Find me a poster" />
</form>

<script type="text/javascript">

function showdata() {
    var film = document.getElementById('term').value;
    console.log(film);
}

    var requestURL = "https://api.themoviedb.org/3/movie/9340/images?api_key=my-api-key";

    var request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

    request.onload = function(){
        var myjsondata = request.response; //request.response contains all our JSON data 

        console.log(myjsondata);
        var str = "<img src = 'https://image.tmdb.org/t/p/w500"+ myjsondata.posters[2].file_path +"'/>";
        console.log(str);
        document.write(str);
    } 

</script>
</body>
</html>

Solution

I can't test it as getting their API key requires too much hassle, but I guess what you need is search call:

<html>
<head>
    <title>Test app</title>
    <style type="text/css">
        #fetch{
            position: absolute;
            text-align: center;
            left: 450px;
            top: 35px;
        }
    </style>
</head>
<body>

<form name="fetch-movie-title" id="fetch">
     <input type="text" placeholder="Enter a movie title" id="term" />
     <input type="submit" onclick="showdata()" id="search" value="Find me a poster" />
</form>

<script type="text/javascript">

function showdata() {
    var film = document.getElementById('term').value;
    console.log(film);

    var requestURL = "https://api.themoviedb.org/3/search/movie?api_key=<<api_key>>&language=en-US&query="+film+"&page=1&include_adult=false";

    var request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

    request.onload = function(){
        var myjsondata = request.response; //request.response contains all our JSON data 

        console.log(myjsondata);
        var str = "<img src = 'https://image.tmdb.org/t/p/w500"+ myjsondata.results[0].poster_path+"'/>";
        console.log(str);
        document.write(str);
    } 

</script>
</body>
</html>

See this link -> https://developers.themoviedb.org/3/search/search-movies and then click on try it using your api-key as well as search query.