How to change the poster image

I’m not able to change the poster image.

Hi @ps.priya151,

It should be

document.getElementById("output 12").src = movie_detail.Poster ;

Copy your whole HTML code here by using </> instead of sharing the screenshot. It will help us in testing out your code.

Do let me know in case you need further assistance.

sir sitll not working

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movie Finder.com</title>
    <link rel="stylesheet" type="text/css" href="moviefinder.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container">
      <header class="moviefinder-header">
      <div class="div-logo">
        <img src="logoo.jpg">
        <span class="logo-text">MovieFinder</span>
      </div>
      <nav class="moviefinder-nav">
        <a href="moviefinder.html">Home</a>
        <a href="About.html">About</a>
        <a href="Feedback.html">Feedback</a>
        <a href="contact.html">contact</a>
      </nav>
      
      </header>
      <div class="image-content">
          <h1 class="quote"> Movie Finder</h1>
          <div class="poster">
        <img id="output 12" src="logo.jpg"width="200" height="150">
        <h1 style="color:white;">Search your movie you want!</h1>

<p style="color:#40ba29;">BOLT IoT </p>

<p><b></b> </p>
    </div>
     <div class="search">
   
  <input id="movie_name" placeholder="Movieee....">
  <div class="button" >
  <button onclick="Movie_Finder()"> SUMBIT</button>
  </div>

   <p id="output 1"> </p>
     <p id="output 2"> </p>
     <p id="output 3"> </p>
     <p id="output 4"> </p>
     <p id="output 5"> </p>
     <p id="output 6"> </p>
     <p id="output 7"> </p>
     <p id="output 8"> </p>
     <p id="output 9"> </p>
     <p id="output 10"> </p>
     <p id="output 11"> </p>
     <p id="output 12"> </p>
     <p id="output 14"> </p>
     <p id="output 15"> </p>
     <p id="output 16"> </p>
     
  
   </div>
  <script type="text/javascript">

    function Movie_Finder(){
      document.getElementById("output 1").style.color ="white";
              document.getElementById("output 2").style.color ="white";
              document.getElementById("output 2").style.color ="white";
              document.getElementById("output 3").style.color ="white";
              document.getElementById("output 4").style.color ="white";
              document.getElementById("output 5").style.color ="white";
              document.getElementById("output 6").style.color ="white";
              document.getElementById("output 7").style.color ="white";
              document.getElementById("output 8").style.color ="white";
              document.getElementById("output 9").style.color ="white";
              document.getElementById("output 10").style.color ="white";
              document.getElementById("output 11").style.color ="white";
              document.getElementById("output 12").src =Movie_Finder.Poster ;



              document.getElementById("output 14").style.color ="white";
              document.getElementById("output 15").style.color ="white";
              document.getElementById("output 16").style.color ="white";
              

            movie_name = document.getElementById("movie_name").value;
            httpRequest = new XMLHttpRequest();
            url = "http://www.omdbapi.com/?apikey=9145eaa7&t=" + movie_name;
 
            httpRequest.open("GET",url);
            httpRequest.send();


          

            httpRequest.onreadystatechange = function(){
              if (this.readyState == 4 && this.status == 200)
              {
                   console.log(this.responseText);
                     movie_detail = JSON.parse(this.responseText);
                     document.getElementById("output 1").innerHTML = movie_detail.Title;
                     document.getElementById("output 2").innerHTML = movie_detail.Realeased;
                      document.getElementById("output 3").innerHTML = movie_detail.Year;
                       document.getElementById("output 4").innerHTML = movie_detail.Rated;
                       document.getElementById("output 5").innerHTML = movie_detail.Runtime;
                       document.getElementById("output 6").innerHTML = movie_detail.Genre;
                       document.getElementById("output 7").innerHTML = movie_detail.Writer;
                       document.getElementById("output 8").innerHTML = movie_detail.Plot;
                       document.getElementById("output 9").innerHTML = movie_detail.Language;
                       document.getElementById("output 10").innerHTML = movie_detail.Awards;
                       document.getElementById("output 11").innerHTML = movie_detail.country;
                       document.getElementById("output 12").innerHTML =movie_detail.Poster;
                       
                       document.getElementById("output 14").innerHTML = movie_detail.Metascore;
                       document.getElementById("output 15").innerHTML = movie_detail.imdbRating;
                       document.getElementById("output 16").innerHTML = movie_detail.BoxOffice;
                       

              }
            }
      
            
      }
    
  </script>
    </div>
    </div>

    <footer class="footer">
      <div style="height: 100%;">
        <a href="moviefinder.html">Home</a>
        <a href="About.html">About</a>
        <a href="Feedback.html">Feedback</a>
        <a href="contact.html">contact</a>
        
      <div>
        Design by Priya copyright@movie finder
      </div>

     </div>
    </footer>
   
  </body>
</html>

Hi @ps.priya151,

The first error that I can see in your code is you are try to set the src attribute that is incorrect. It should be

<img id="output 12"/> 

Also what is the use of below lines ?

document.getElementById("output 2").style.color ="white";
              document.getElementById("output 2").style.color ="white";
              document.getElementById("output 3").style.color ="white";
              document.getElementById("output 4").style.color ="white";
              document.getElementById("output 5").style.color ="white";
              document.getElementById("output 6").style.color ="white";
              document.getElementById("output 7").style.color ="white";
              document.getElementById("output 8").style.color ="white";
              document.getElementById("output 9").style.color ="white";
              document.getElementById("output 10").style.color ="white";
              document.getElementById("output 11").style.color ="white";
              document.getElementById("output 12").src =Movie_Finder.Poster ;



              document.getElementById("output 14").style.color ="white";
              document.getElementById("output 15").style.color ="white";
              document.getElementById("output 16").style.color ="white";
              

In the response section, you have to set the img src -

document.getElementById("output 12").src =movie_detail.Poster;

Here is the updated code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movie Finder.com</title>
    <link rel="stylesheet" type="text/css" href="moviefinder.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container">
      <header class="moviefinder-header">
      <div class="div-logo">
        <img src="logoo.jpg">
        <span class="logo-text">MovieFinder</span>
      </div>
      <nav class="moviefinder-nav">
        <a href="moviefinder.html">Home</a>
        <a href="About.html">About</a>
        <a href="Feedback.html">Feedback</a>
        <a href="contact.html">contact</a>
      </nav>
      
      </header>
      <div class="image-content">
          <h1 class="quote"> Movie Finder</h1>
          <div class="poster">
        <img id="output 12" src="logo.jpg"width="200" height="150">
        <h1 style="color:white;">Search your movie you want!</h1>

<p style="color:#40ba29;">BOLT IoT </p>

<p><b></b> </p>
    </div>
     <div class="search">
   
  <input id="movie_name" placeholder="Movieee....">
  <div class="button" >
  <button onclick="Movie_Finder()"> SUMBIT</button>
  </div>

   <p id="output 1"> </p>
     <p id="output 2"> </p>
     <p id="output 3"> </p>
     <p id="output 4"> </p>
     <p id="output 5"> </p>
     <p id="output 6"> </p>
     <p id="output 7"> </p>
     <p id="output 8"> </p>
     <p id="output 9"> </p>
     <p id="output 10"> </p>
     <p id="output 11"> </p>
     <img id="output 12"/> 
     <p id="output 14"> </p>
     <p id="output 15"> </p>
     <p id="output 16"> </p>
     
  
   </div>
  <script type="text/javascript">

    function Movie_Finder(){
      document.getElementById("output 1").style.color ="white";
              // document.getElementById("output 2").style.color ="white";
              // document.getElementById("output 2").style.color ="white";
              // document.getElementById("output 3").style.color ="white";
              // document.getElementById("output 4").style.color ="white";
              // document.getElementById("output 5").style.color ="white";
              // document.getElementById("output 6").style.color ="white";
              // document.getElementById("output 7").style.color ="white";
              // document.getElementById("output 8").style.color ="white";
              // document.getElementById("output 9").style.color ="white";
              // document.getElementById("output 10").style.color ="white";
              // document.getElementById("output 11").style.color ="white";
              // document.getElementById("output 12").src =Movie_Finder.Poster ;



              // document.getElementById("output 14").style.color ="white";
              // document.getElementById("output 15").style.color ="white";
              // document.getElementById("output 16").style.color ="white";
              

            movie_name = document.getElementById("movie_name").value;
            httpRequest = new XMLHttpRequest();
            url = "http://www.omdbapi.com/?apikey=9145eaa7&t=" + movie_name;
 
            httpRequest.open("GET",url);
            httpRequest.send();


          

            httpRequest.onreadystatechange = function(){
              if (this.readyState == 4 && this.status == 200)
              {
                   console.log(this.responseText);
                     movie_detail = JSON.parse(this.responseText);
                     document.getElementById("output 1").innerHTML = movie_detail.Title;
                     document.getElementById("output 2").innerHTML = movie_detail.Realeased;
                      document.getElementById("output 3").innerHTML = movie_detail.Year;
                       document.getElementById("output 4").innerHTML = movie_detail.Rated;
                       document.getElementById("output 5").innerHTML = movie_detail.Runtime;
                       document.getElementById("output 6").innerHTML = movie_detail.Genre;
                       document.getElementById("output 7").innerHTML = movie_detail.Writer;
                       document.getElementById("output 8").innerHTML = movie_detail.Plot;
                       document.getElementById("output 9").innerHTML = movie_detail.Language;
                       document.getElementById("output 10").innerHTML = movie_detail.Awards;
                       document.getElementById("output 11").innerHTML = movie_detail.country;
                       document.getElementById("output 12").src =movie_detail.Poster;
                       
                       document.getElementById("output 14").innerHTML = movie_detail.Metascore;
                       document.getElementById("output 15").innerHTML = movie_detail.imdbRating;
                       document.getElementById("output 16").innerHTML = movie_detail.BoxOffice;
                       

              }
            }
      
            
      }
    
  </script>
    </div>
    </div>

    <footer class="footer">
      <div style="height: 100%;">
        <a href="moviefinder.html">Home</a>
        <a href="About.html">About</a>
        <a href="Feedback.html">Feedback</a>
        <a href="contact.html">contact</a>
        
      <div>
        Design by Priya copyright@movie finder
      </div>

     </div>
    </footer>
   
  </body>
</html>

Do let me know in case you need any other information.