The filter is working but the test #12 to #15 are not passing.
<!-- 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";
}
});
});
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
Build a Set of Football Team Cards - Build a Set of Football Team Cards
ILM
February 5, 2025, 10:20am
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
February 5, 2025, 10:26am
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
February 5, 2025, 10:28am
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
February 5, 2025, 10:47am
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.
I am sorry but what does that mean I cant seem to find that part on my code
If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.
The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
