#javascript #html
#javascript #HTML
Вопрос:
Я новичок в JavaScript и надеюсь, что смогу получить здесь некоторое руководство. Итак, моя задача — обновить содержимое в блоке HTML при выборе соответствующей опции.
Мне нужно использовать 2 функции в заданном javascript для генерации содержимого из javascript, содержащего массивы объектов.
Я настроил коды для выбора опции из Dropbox, и она работает хорошо. Проблема в том, что мне нужно обновить информацию (название фильма из movies.js , дата, время и дом) соответствующего кинотеатра. Всякий раз, когда я выбираю кинотеатр, содержимое должно быть изменено в соответствии с выбранным кинотеатром. Я попытался запустить цикл, и это действительно кажется глупым и не удалось, как и ожидалось. Как я могу отредактировать свои коды, чтобы содержимое можно было обновлять при выборе соответствующей опции (cinema)? СПАСИБО за ваше время, и мы высоко ценим вашу помощь. Я застрял на этом шаге очень долго: (
Это мой код (выбор связанного кинотеатра), и я попытался запустить цикл, но не удалось: ( :
<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>
Для cinema.js , заданный массив равен :
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
}
]
}
]
}
]
}
Для movies.js , заданный массив равен :
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
}
]
}
Ответ №1:
Нужно изучить некоторые приемы JS…
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> Комментарии:
1. Привет, спасибо за ваш ответ! Но если jQuery не разрешен, есть ли у вас какие-либо идеи о том, как запустить цикл массива, используя только JavaScript? Спасибо!
2. @Kevin в моем коде нет jQuery. Все это чистый JS. смотрите developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach и developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…
3. Я вижу, я вижу. Спасибо за ваши разъяснения! Я новичок в этом языке и все еще немного смущен этим lmao. Большое вам спасибо: D Хорошего дня.