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.