Tell us what’s happening:
The filter is working but the test #12 to #15 are not passing.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
const selectedValue = filterEl.value;
const allCards = document.querySelectorAll(".player-card");
allCards.forEach(card => {
const positionText = card.querySelector("p").textContent;
const cardPosition = positionText.replace("Position: ", "").trim();
if (selectedValue === "all" || cardPosition === selectedValue) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards
ILM
2
please share all your code, I can’t do any debugging if you don’t share the rest of the code
modified code give me the same error:
// 1) The footballTeam object
const footballTeam = {
// (A) Must have these four properties with correct types:
team: "Argentina", // string
year: 1986, // number
headCoach: "Carlos Bilardo", // string
players: [ // array of at least four objects
{
name: "Diego Maradona",
position: "midfielder",
isCaptain: true
},
{
name: "Jorge Valdano",
position: "forward",
isCaptain: false
},
{
name: "Oscar Ruggeri",
position: "defender",
isCaptain: false
},
{
name: "Nery Pumpido",
position: "goalkeeper",
isCaptain: false
}
]
};
// 2) Display the team, year, and head coach in their respective elements
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;
// 3) Build player cards inside player-cards
const playerCardsContainer = document.getElementById("player-cards");
footballTeam.players.forEach(player => {
const cardDiv = document.createElement("div");
cardDiv.classList.add("player-card");
// (a) Name
const nameHeading = document.createElement("h2");
nameHeading.textContent = player.isCaptain
? `(Captain) ${player.name}`
: player.name;
// (b) Position
const positionPara = document.createElement("p");
positionPara.textContent = `Position: ${player.position}`;
// Append to the card
cardDiv.appendChild(nameHeading);
cardDiv.appendChild(positionPara);
// Add the card to player-cards
playerCardsContainer.appendChild(cardDiv);
});
// 4) Filtering logic
const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
const selectedValue = filterEl.value;
const allCards = document.querySelectorAll(".player-card");
allCards.forEach(card => {
const positionText = card.querySelector("p").textContent;
const cardPosition = positionText.replace("Position: ", "").trim();
if (selectedValue === "All Players") {
card.style.display = "block";
} else if (selectedValue === "Position Forward" && cardPosition === "forward") {
card.style.display = "block";
} else if (selectedValue === "Position Midfielder" && cardPosition === "midfielder") {
card.style.display = "block";
} else if (selectedValue === "Position Defender" && cardPosition === "defender") {
card.style.display = "block";
} else if (selectedValue === "Position Goalkeeper" && cardPosition === "goalkeeper") {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
});
These tests are failing:
-
- When the option
Position Forward
is selected, only forward players should be shown within #player-cards
.
-
- When the option
Position Midfielder
is selected, only midfielder players should be shown within #player-cards
.
-
- When the option
Position Defender
is selected, only defender players should be shown within #player-cards
.
-
- When the option
Position Goalkeeper
is selected, only goalkeeper players should be shown.
ILM
4
thank you!
check the html for what are the values of the select
element, those you are using are not the correct values
I modified the HTML . But the code that came autogenerated didn’t work as well.
<!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 Players">All Players</option>
<option value="Position Forward">Position Forward</option>
<option value="Position Midfielder">Position Midfielder</option>
<option value="Position Defender">Position Defender</option>
<option value="Position Goalkeeper">Position Goalkeeper</option>
</select>
<div class="cards" id="player-cards"></div>
</main>
<footer>© freeCodeCamp</footer>
<script src="./script.js"></script>
</body>
</html>
ILM
6
you should not change the html, you should change the strings you compare the values to in the JavaScript
So I reset the lesson and add the following JS, but not passing the same 4 tests again:
// 1) The footballTeam object
const footballTeam = {
// (A) Must have these four properties with correct types:
team: "Argentina", // string
year: 1986, // number
headCoach: "Carlos Bilardo", // string
players: [ // array of at least four objects
{
name: "Diego Maradona",
position: "midfielder",
isCaptain: true
},
{
name: "Jorge Valdano",
position: "forward",
isCaptain: false
},
{
name: "Oscar Ruggeri",
position: "defender",
isCaptain: false
},
{
name: "Nery Pumpido",
position: "goalkeeper",
isCaptain: false
}
]
};
// 2) Display the team, year, and head coach in their respective elements
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;
// 3) Build player cards inside #player-cards
const playerCardsContainer = document.getElementById("player-cards");
footballTeam.players.forEach(player => {
const cardDiv = document.createElement("div");
cardDiv.classList.add("player-card");
// (a) Name in <h2>
const nameHeading = document.createElement("h2");
nameHeading.textContent = player.isCaptain
? `(Captain) ${player.name}`
: player.name;
// (b) Position in <p>
const positionPara = document.createElement("p");
// Must be exactly "Position: forward" or "Position: defender", etc.
positionPara.textContent = `Position: ${player.position}`;
// Append to the card
cardDiv.appendChild(nameHeading);
cardDiv.appendChild(positionPara);
// Add the card to #player-cards
playerCardsContainer.appendChild(cardDiv);
});
// 4) Filtering logic for the <select> with id="players"
const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
const selectedValue = filterEl.value.toLowerCase();
const allCards = document.querySelectorAll(".player-card");
allCards.forEach(card => {
const positionText = card.querySelector("p").textContent;
const cardPosition = positionText.replace("Position: ", "").toLowerCase().trim();
if (selectedValue === "all") {
card.style.display = "block";
} else if (cardPosition === selectedValue) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
});
ILM
9
Your issue is that you still have the elements on the page, even if hidden from view, so the tests still see them
1 Like
Thank you for taking the time. This worked.