I'm trying to append an image from a javascript object Array onto my html page
Question
So I was able to create a movie class array with 4 constructors, and a for loop with 3 iterations that represent three different movies. On the html page this allows the user to open a dropdown selection and pick one of the three movies. After hitting the submit button I want to display all the info for all the movie they selected including its image which is the difficult part. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="Script.js"></script>
</head>
<body>
<form >
<select>
</select>
<button onclick="showDetail()">Submit</button>
</form>
<p></p>
</body>
</html>
class movie {
name;
price;
image;
genre;
constructor(x,y,z,a){
this.name = x;
this.price = y;
this.image = z;
this.genre = a;
}
}
let movies =[];
movies[0]= new movie("Deadpool", "$6.95","Image/Deadpool.jpg", "Superhero, Action");
movies[1]= new movie("Titanic", "$4.95", "" , "Romance, Drama");
movies[2]= new movie("Spiderman 3", "$6.95","", "Superhero, Action");
$(document).ready(function() { console.log( "ready!");
for (var i = 0; i < 3; i++){
movies[0].image= "Image/Deadpool.jpg";
movies[1].image= "Image/Titanic.jpg";
movies[2].image= "Image/Spiderman.jpg";
$("select").append(`<option>${movies[i].name}</option>`); console.log(i) }});
function showDetail(){
for (var i = 0; i < 3; i++){
$("p").append(`${movies[i].price},${movies[i].genre}, ${movies[i].image}`);
}
}
1 answers
solution1
0 2020-10-09 21:48:58
You can append HTML using.append() but I would not recommend appending it to a paragraph tag, and using the paragraph selector, try doing this:
<div id="details"> </div>
Add the above instead of the paragraph tag and then in jquery you could so something like:
$('#details').append(`<h1> ${movies[i].price} </h1> <p> ${movies[i].genre} </p> <img src="${movies[i].image}" alt="movie" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.