Я пытаюсь создать веб-страницу, которая выводит изображения в виде выходных данных, если пользователь щелкает опцию. Я довольно новичок в этом HTML веб-создании.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>NBA Draft Prediction</h1>
<div id="filters">
</div>
<div id="results">
</div>
<script>
var playersByPosition = [{
name: 'Center',
players: ['player1', 'player2'],
},
{
name: 'Scoring Forward',
players: ['player3', 'player4'],
},
{
name: 'Slashing Forward',
players: ['player5', 'player6'],
},
{
name: 'Two Way Forward',
players: ['player7', 'player8'],
},
{
name: 'Combo Guard',
players: ['player9', 'player10'],
},
{
name: 'Scoring Guard',
players: ['player11', 'player12'],
},
{
name: 'Passing Guard',
players: ['player13', 'player14'],
},
{
name: 'Play Maker',
players: ['player15', 'player16'],
}
];
var buildSelectors = function(positions) {
var options = positions.map(function(position) {
return '<option>' + position.name + '</option>';
}).join('');
return '<select class="filter" name="positions">' + options + '</select>';
}
var filtersElem = document.querySelector('#filters');
var resultsElem = document.querySelector('#results');
filtersElem.innerHTML = buildSelectors(playersByPosition);
var filterResultsForFilterValue = function(value) {
var selectedPosition = playersByPosition.find(function(position) {
return position.name === value;
});
var formattedResults = selectedPosition.players.map(function(player) {
return '<h3>Player: ' + player + '</h3>';
}).join('');
resultsElem.innerHTML = formattedResults;
};
document.querySelectorAll('.filter').forEach(function(filter) {
filter.addEventListener('change', function(e) {
var selectedPosition = playersByPosition.find(function(position) {
return position.name === e.currentTarget.value;
});
filterResultsForFilterValue(selectedPosition.name)
})
})
filterResultsForFilterValue(playersByPosition[0].name)
</script>
</body>
</html>
Итак, если пользователь выбирает опцию вместо «Player3» и «player4», должно появиться изображение. И если мы нажмем на это изображение, должны появиться некоторые детали этого игрока. Является ли это возможным? Как это сделать?? Любые другие предложения также приветствуются.