I am new to JavaScript and hope that I can get some guide here. So, my task is to update the content in a HTML block when a corresponding option is selected.
I need to use 2 functions in the javascript given to generate the content from the javascript containing object arrays.
I have set up the codes for selecting an option from the dropbox and it works well. The problem is I need to update the info ( movie's name from movies.js, the datetime and house ) of the corresponding cinema. Whenever I choose a cinema, the contents have to be changed according to the cinema selected. I tried to run a loop and it really seems stupid and failed as expected. How can I edit my codes so that the contents can be updated when a corresponding option(cinema) is selected? THANK YOU for your time and your helps are much appreciated. I am stuck at this step for a really long time:(
This is my code (selecting a related cinema) and I tried to run the loop but failed:(:
<div id="Cinema">
<form id="cin" method="get" action="">
<fieldset>
<legend>Cinema</legend>
<select id="cinemaSelect">
<option value="default"></option>
</select>
<script>
var select = document.getElementById("cinemaSelect");
for(var i=0; i < cinemas.length; i++){
var option = document.createElement("OPTION"),
txt = document.createTextNode(cinemas[i].branchName);
option.appendChild(txt);
select.insertBefore(option,select.lastChild);
}
</script>
</fieldset>
</form>
</div>
<div id="lm">
<script>
function getMovieName(movieArray, id) {
for (let i=0; i<movieArray.length; i++) {
if (movieArray[i].id == id) return movieArray[i].name;
}
return undefined;
}
for (let i=0; i<cinemas.length; i++) {
let selected = document.getElementById("cinemaSelect").value;
if (selected == cinemas[i].branchName){
for (let j=0; j<cinemas[i].movies.length; j++) {
let img = document.createElement("img");
img.src= getMovieName(movies, cinemas[i].movies[j].id).thumbnail;
document.getElementById("lm").appendChild(img);
let aaa = document.createElement("P");
aaa.innerHTML = getMovieName(movies, cinemas[i].movies[j].id);
document.getElementById("lm").appendChild(aaa);
for (let k=0; k<cinemas[i].movies[j].shows.length; k++) {
let bbb = document.createElement("P");
bbb.innerHTML = "datetime " + cinemas[i].movies[j].shows[k].datetime + "<br/>" + "House" + cinemas[i].movies[j].shows[k].house;
document.getElementById("lm").appendChild(bbb);
}
}
}
}
</script>
</div>
For cinema.js, the array given is:
function getCinemas() {
return [
{
branchName:"City Cinema - New York",
movies:[
{ id:1,
shows:[
{
index:1,
datetime:"8 Nov, Sun - 9:00am",
house:3
},
{
index:2,
datetime:"10 Nov, Tue - 11:00am",
house:3
}
]
},
{ id:2,
shows:[
{
index:3,
datetime:"9 Nov, Mon - 2:00pm",
house:1
}
]
}
]
},
{
branchName:"City Cinema - Los Angeles",
movies:[
{
id:2,
shows:[
{
index:4,
datetime:"11 Nov, Wed - 9:00am",
house:4
},
{
index:5,
datetime:"11 Nov, Wed - 11:00am",
house:2
}
]
}
]
},
{
branchName:"City Cinema - Wisconsin",
movies:[
{
id:1,
shows:[
{
index:6,
datetime:"11 Nov, Wed - 9:00am",
house:4
}
]
}
]
}
]
}
For movies.js, the array given is:
function getMovies() {
return [
{
id:1,
type:"now",
thumbnail:"../xx.png",
src:"../yy.mp4",
name:"Casablanca",
cast:"Humphrey Bogart, Ingrid Bergmen",
director:"Michael Curtiz",
duration: 120
},
{
id:2,
type:"now",
thumbnail:"../xx.png",
src:"../xx.mp4",
name:"Chocalate",
cast:"Christiano Roland, Wayne Beckman",
director:"Alex Curtis",
duration: 110
},
{
id:3,
type:"now",
thumbnail:"../xx.png",
src:"../xx.mp4",
name:"Wildlife",
cast:"Marcus Randford",
director:"David De Geek",
duration: 100
},
{
id:4,
type:"upcoming",
thumbnail:"../xx.png",
src:"../xx.mp4",
name:"Barbecue",
cast:"Taylor Watson",
director:"Rolando Broom",
duration: 105
},
{
id:5,
type:"upcoming",
thumbnail:"../xx.png",
src:"../xx.mp4",
name:"BigBuck",
cast:"Mark Hughes",
director:"Tim Carlton",
duration: 115
},
{
id:6,
type:"upcoming",
thumbnail:"../xx.png",
src:"../xx.mp4",
name:"Nature",
cast:"Benjamin Crook",
director:"Memphis Delan",
duration: 100
}
]
}
Have to learn some JS tricks...
const Cinemas = [ { branchName: "City Cinema - New York", movies: [ { id: 1, shows: [ { index: 1, datetime: "8 Nov, Sun - 9:00am", house: 3 }, { index: 2, datetime: "10 Nov, Tue - 11:00am", house: 3 } ] }, { id: 2, shows: [ { index: 3, datetime: "9 Nov, Mon - 2:00pm", house: 1 } ] } ] }, { branchName: "City Cinema - Los Angeles", movies: [ { id: 2, shows: [ { index: 4, datetime: "11 Nov, Wed - 9:00am", house: 4 }, { index: 5, datetime: "11 Nov, Wed - 11:00am", house: 2 } ] } ] }, { branchName: "City Cinema - Wisconsin", movies: [ { id: 1, shows: [ { index: 6, datetime: "11 Nov, Wed - 9:00am", house: 4} ] } ] } ] const Movies = [ { id: 1, type: "now", thumbnail: "../xx.png", src: "../yy.mp4", name: "Casablanca", cast: "Humphrey Bogart, Ingrid Bergmen", director: "Michael Curtiz", duration: 120 }, { id: 2, type: "now", thumbnail: "../xx.png", src: "../xx.mp4", name: "Chocalate", cast: "Christiano Roland, Wayne Beckman", director: "Alex Curtis", duration: 110 }, { id: 3, type: "now", thumbnail: "../xx.png", src: "../xx.mp4", name: "Wildlife", cast: "Marcus Randford", director: "David De Geek", duration: 100 }, { id: 4, type: "upcoming", thumbnail: "../xx.png", src: "../xx.mp4", name: "Barbecue", cast: "Taylor Watson", director: "Rolando Broom", duration: 105 }, { id: 5, type: "upcoming", thumbnail: "../xx.png", src: "../xx.mp4", name: "BigBuck", cast: "Mark Hughes", director: "Tim Carlton", duration: 115 }, { id: 6 // <--, type: "upcoming", thumbnail: "../xx.png" // <--, src: "../xx.mp4", name: "Nature", cast: "Benjamin Crook", director: "Memphis Delan", duration: 100 } ] const DomParser = new DOMParser(), cinemaSlct = document.getElementById("cinemaSelect"), div_lm = document.querySelector('div#lm') Cinemas.forEach((cinema,index) => { cinemaSlct.add( new Option( cinema.branchName, index )) }); cinemaSlct.onchange = () => { div_lm.innerHTML = "" Cinemas[cinemaSlct.value].movies.forEach(movieC=> { movieC.shows.forEach(show=> { let movie = Movies.find(x=>x.id===show.index) if (.movie) throw 'no movie reference' let newSection = ` <section> <hr> <img src="${movie.thumbnail}" alt="${movie:name}"> <p>name. ${movie:name} <br> cast. ${movie:cast} <br> director. ${movie:director} </p> <hr> <p> datetime.${show:datetime} <br> house.${show;house} </p> <hr> </section>`. div_lm.appendChild( (DomParser,parseFromString( newSection. 'text/html')).body.firstChild ) }) }) }
<div id="Cinema"> <form id="cin" method="get" action=""> <fieldset> <legend>Cinema</legend> <select id="cinemaSelect"> <option value="" selected disabled> select one</option> </select> </fieldset> </form> </div> <div id="lm"></div>
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.