Anyone know why my code isn’t working? I can’t seem to display the cards on the screen by inserting the HTML through js. Super confused as when I manually insert the same code then it works. I’m definitely missing something.
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Build a Set of Football Team Cards
</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Team stats</h1>
<main>
<div class="team-stats">
<p>Team: <span id="team"></span></p>
<p>Year: <span id="year"></span></p>
<p>Head coach: <span id="head-coach"></span></p>
</div>
<label class="options-label" for="players">Filter Teammates:</label>
<select name="players" id="players">
<option value="all">All Players</option>
<option value="forward">Position Forward</option>
<option value="midfielder">Position Midfielder</option>
<option value="defender">Position Defender</option>
<option value="goalkeeper">Position Goalkeeper</option>
</select>
<div class="cards" id="player-cards">
</div>
</main>
<footer>© freeCodeCamp</footer>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--dark-grey: #0a0a23;
--light-grey: #f5f6f7;
--white: #ffffff;
--black: #000;
}
body {
background-color: var(--dark-grey);
text-align: center;
padding: 10px;
}
.title,
.options-label,
.team-stats,
footer {
color: var(--white);
}
.title {
margin: 1.3rem 0;
}
.team-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
font-size: 1.3rem;
margin: 1.2rem 0;
}
.options-label {
font-size: 1.2rem;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.player-card {
background-color: var(--light-grey);
padding: 1.3rem;
margin: 1.2rem;
width: 300px;
border-radius: 15px;
}
@media (max-width: 768px) {
.team-stats {
flex-direction: column;
}
}
/* file: script.js */
const footballTeam = {
team: "Barcelona",
year: 1999,
headCoach: "Louis van Gaal",
players: [
{
name: "Rivaldo",
position: "forward",
isCaptain: false
},
{
name: "Pep Guardiola",
position: "midfielder",
isCaptain: true
},
{
name: "Sonny Anderson",
position: "forward",
isCaptain: false
},
{
name: "Frank de Boer",
position: "defender",
isCaptain: false
}
]
};
const options = document.querySelector(".options-label");
const players = document.getElementById("players")
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
const playerCards = document.getElementById("player-cards");
const cardDiv = document.createElement("div");
year.innerText = footballTeam.year;
team.innerText = footballTeam.team;
headCoach.innerText = footballTeam.headCoach;
//array of all team
const all = footballTeam.players;
//arrays of positions
const forwards = all.filter((player) => player.position === "forward");
const mids = all.filter((player) => player.position === "midfielder");
const defenders = all.filter((all) => all.position === "defender");
/* Code to insert into #player-cards div:
<div class="player-card">
<h1>
[player name]</h1>
<p>[position]</p>
</div> */
function stringInput (input) {
let stringArr = []
//loop to return string to instert into HTML:
for(let i=0; i < input.length; i++) {
stringArr.push("<div class=\"player-card\"><h1>" + input[i].name + "</h1><p>" + input[i].position + "</p></div>");
}
let string = stringArr.join("")
playerCards.innerText = string;
}
options.addEventListener(
"change",
stringInput(players.value))
;
console.log(playerCards.innerText)
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Build a Set of Football Team Cards - Build a Set of Football Team Cards
sanity
May 26, 2025, 12:20pm
2
Could you explain how it’s supposed to work? What happens with the value of select?
If you select all text on the preview page, there’s few lines with black text below the select input.
When the user changes the options then the selected value of the cards should appear on the screen
Options is supposed to be the options dropdown… so when it changes the correct cards are displayed. So input would be the array that was selected
I meant in code. Which part is doing what and why?
right so i’ve updated it and the cards are showing up now and it’s logging the correct value to the console but the HTML isn’t changing…
function stringInput (input) {
let stringArr = []
//loop to return string to instert into HTML:
for(let i=0; i < input.length; i++) {
stringArr.push("<div class=\"player-card\"><h1>" + input[i].name + "</h1><p>" + input[i].position + "</p></div>");
}
return stringArr.join("")
}
players.addEventListener("change", () => {
playerCards.innerHTML = stringInput (players.value);
console.log(players.value)
});
fcc4b6d10c4-b540-4e2:
What is input here?
Just inside the stringInput() function, console.log() input and notice how you’re trying to use that inside the function.
right so i realised that is where I went wrong. I changed my approach to this:
function stringInput (input) {
let stringArr = []
//loop to return string to insert into HTML:
for(let i=0; i < input.length; i++) {
stringArr.push("<div class=\"player-card\"><h1>" + input[i].name + "</h1><p>" + input[i].position + "</p></div>");
}
return stringArr.join("")
}
players.addEventListener("change", () => {
console.log(players.value)
if(players.value === "all") {
playerCards.innerHTML = stringInput (all);
} else if(players.value === "defender") {
playerCards.innerHTML = stringInput (defenders);
} else if(players.value === "forward") {
playerCards.innerHTML = stringInput (forwards)
}else if(players.value === "midfielder") {
playerCards.innerHTML = stringInput (mids)
} else {
playerCards.innerHTML =
stringInput ("")
}
});
So the correct cards are showing when the event occurs but im failing the tests. Why
Again. What do you think this is doing?
I am so lost right now
i can’t seem to figure it out.
const footballTeam = {
team: "Barcelona",
year: 1999,
headCoach: "Louis van Gaal",
players: [
{
name: "Rivaldo",
position: "forward",
isCaptain: false
},
{
name: "Pep Guardiola",
position: "midfielder",
isCaptain: true
},
{
name: "Sonny Anderson",
position: "forward",
isCaptain: false
},
{
name: "Frank de Boer",
position: "defender",
isCaptain: false
}
]
};
const options = document.querySelector(".options-label");
const players = document.getElementById("players")
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
const playerCards = document.getElementById("player-cards");
const cardDiv = document.createElement("div");
year.innerText = footballTeam.year;
team.innerText = footballTeam.team;
headCoach.innerText = footballTeam.headCoach;
//array of all team
const all = footballTeam.players;
//arrays of positions
const forwards = all.filter((player) => player.position === "forward");
const mids = all.filter((player) => player.position === "midfielder");
const defenders = all.filter((all) => all.position === "defender");
let forwards1 = forwards.map((player) => {
return "<div class=\"player-card\"><h1>" + player.name + "</h1><p>" + player.position + "</p></div>";})
let mids1 = mids.map((player) => {
return "<div class=\"player-card\"><h1>" + player.name + "</h1><p>" + player.position + "</p></div>";})
let defenders1 = defenders.map((player) => {
return "<div class=\"player-card\"><h1>" + player.name + "</h1><p>" + player.position + "</p></div>";})
let all1 = all.map((player) => {
return "<div class=\"player-card\"><h1>" + player.name + "</h1><p>" + player.position + "</p></div>";})
players.addEventListener("change", () => {
if(players.value === "all") {
playerCards.innerHTML = all1.join("");
} else if(players.value === "defender") {
playerCards.innerHTML = defenders1.join("");
} else if(players.value === "forward") {
playerCards.innerHTML = forwards1.join("")
}else if(players.value === "midfielder") {
playerCards.innerHTML = mids1
} else if(players.value === "goalkeeper"){
playerCards.innerHTML =
stringInput ("")
}
});
This isn’t passing either and its fulfilling the problems. Pls help
What are you doing to debug your code? I see no console.log() statements.
I deleted them before posting on here. Am i not supposed to do that??
Right I’ve eventually ended up with:
const footballTeam = {
team: "Barcelona",
year: 1999,
headCoach: "Louis van Gaal",
players: [
{
name: "Rivaldo",
position: "forward",
isCaptain: false
},
{
name: "Pep Guardiola",
position: "midfielder",
isCaptain: true
},
{
name: "Sonny Anderson",
position: "forward",
isCaptain: false
},
{
name: "Frank de Boer",
position: "defender",
isCaptain: false
}
]
};
const options = document.querySelector(".options-label");
const players = document.getElementById("players")
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
const playerCards = document.getElementById("player-cards");
const cardDiv = document.createElement("div");
year.innerText = footballTeam.year;
team.innerText = footballTeam.team;
headCoach.innerText = footballTeam.headCoach;
const playersArr = footballTeam.players;
function showCards(playerPosition) {
const players =
playerPosition === "all"
? playersArr
: playersArr.filter(
({ position }) => position === playerPosition
);
return players
.map(({ name, position }) => {
return "<div class=\"player-card\"><h1>" +
name + "</h1><p>"+ position + "</p></div>" ;
})
}
players.addEventListener("change", () => {
playerCards.innerHTML = showCards(players.value);
});
but it’s still not passing
When your code isn’t working the way you expect it to, it helps if you show your attempts to debug (and the results from the console). The only time you should remove your logs is when you submit for testing. That said, I’d like to see how you are trying to find the issue yourself, and then I will happily guide you further.
In a past project it requires a similar output and so decided to try that approach. it’s worked - but like my attempts before the outcome is whats asked for but the method seems to not pass.
I’ve spent all day trying different things and it’s sooo frustrating. Really not sure what I’m supposed to try.
Did you try reading the instructions again to make sure you’re doing what is asked?
Yes, so many times! Do I need to change the selector to target the options inner text??I’m running out of ideas..
in the console it says:
