Нечто подобное следующей функции фильтра может быть использовано для достижения вашей цели.В предоставленном вами коде есть несколько проблем, из-за которых код не может выполнить то, что вы хотите.
Обновлен JS:
var games=[
{name:'Forza',
platform:'xbox',
genre:'racing',
descr:'Description',
imgr:'forza.jpg'},
{name:'Need For Speed',
platform:'xbox',
genre:'racing',
descr:'Description',
imgr:'nfs.jpg'}];
/* make sure you add a default value to these variables to avoid errors since the user could submit the button without selecting anything*/
var genre = 'racing';
var platform = 'xbox';
/* onload function */
$(function(){
/* grabs the array of elements in the HTML document that will be changed */
var gameTitle = $('.theGame');
var gameDesc = $('.desc');
var gamePic = $('.pic');
$("#platformType").change(function(){
platform=$(this).val()
});
$("#genreType").change(function(){
genre=$(this).val()
});
/* you only need one 'click' function for '#Submit' */
$("#Submit").click(function(){
console.log(genre, gameTitle, gameDesc, gamePic);
var matchedGames = games.filter((gameObject) => gameObject.genre==genre&&gameObject.platform==platform);
/* clearing out data first */
for (i=0;i<gameTitle.length;i++) {
gameTitle[i].innerHTML="";
gameDesc[i].innerHTML="";
gamePic[i].src="";
}
/* then adding the filtered list of games into the page */
for (i=0;i<matchedGames.length;i++) {
gameTitle[i].innerHTML=matchedGames[i].name;
gameDesc[i].innerHTML=matchedGames[i].descr;
gamePic[i].src=matchedGames[i].imgr;
}
});
});
Обновлен HTML:
<fieldset>
<input type="submit" value="Find Game" id="Submit" />
<select name="filterGame" id="platformType">
<option value="" disabled class="option1">Select</option>
<option value="xbox">xBox</option>
<option value="xbox">Play Station</option>
</select>
<select name="filterGame" id="genreType">
<option value="" disabled class="option1">Select</option>
<option value="racing">Racing</option>
<option value="racing">RPG</option>
</select>
</fieldset>
<!-- added elements to work with the filter function, this can be done a few different ways -->
<div>
<h2 class="theGame"></h2>
<img class="pic" src="">
<p class="desc"></p>
<h2 class="theGame"></h2>
<img class="pic" src="">
<p class="desc"></p>
<h2 class="theGame"></h2>
<img class="pic" src="">
<p class="desc"></p>
<h2 class="theGame"></h2>
<img class="pic" src=""/>
<p class="desc"></p>
</div>
В JS:
filter() возвратмассив, и его нельзя использовать для внесения изменений на странице (например, с помощью .innerHTML),
'false' не нужно явно объявлять (поэтому тернарный оператор isnздесь не требуется), потому что если элемент массива не удовлетворяет требованию, он не будет включен в возвращаемый массив.Это будет удовлетворительным:
var gameArr = games.filter((e)=>e.platform==platform && e.genre==genre);
после того, как функция фильтра используется для возврата нового массива (matchedGames), этот массив используется для добавления данных вHTML-элементы, которые я добавил (количество <h2> элементов должно соответствовать общему количеству игр, если вы решите сделать это таким образом
вместо того, чтобы кодировать элементы вручную по одномуВы можете использовать метод $ ('body'). append (), чтобы сделать что-то похожее
, нет необходимости добавлять игровые данные в элементы <h2> или <p>Вы также можете добавить данные и изображения в таблицу, например, и получить аналогичный результат
. Вам также потребуется какой-то способ очистки данных из предыдущих записей при повторной фильтрации пользователя.В играх вы можете использовать цикл for, чтобы выполнить это, я добавил один из приведенных выше в качестве примера
В HTML:
- Я использовал
<h2> элементы вместо <h1> технически должен быть только один <h1> eэлемент на странице, который должен быть заголовком, чтобы сделать вашу страницу удобной для чтения с экрана
Надеюсь, это поможет вам в вашем задании по кодированию!