I currently have a program with some teams that are in pairs. Clicking on a team increases the Wins of the team being clicked, and increases the Losses of the pair it is linked to. A team with two losses is disabled and changes their text to “Eliminated”.
I have a reset button that is supposed to clear all of the counters and, in theory, by clearing the counters the disabled buttons should be reenabled again. However, this is not the case. Looking at the console you can see the buttons don’t restart their count until you press them, meaning the disabled buttons stay disabled, but what puzzles me is that their text switches back to the team name. How do I get the counter to reset completely after I press the reset button?
Any input would be greatly appreciated 🙂
let groups = [{
name: "Chaos Coordinators",
wins: 0,
losses: 0
},
{
name: "Sofa King Awesome",
wins: 0,
losses: 0
},
{
name: "The Nerd Herd",
wins: 0,
losses: 0
},
{
name: "The Laughing Stock",
wins: 0,
losses: 0
},
{
name: "Brainy Bunch Gone Wild",
wins: 0,
losses: 0
},
{
name: "Cereal Killers",
wins: 0,
losses: 0
},
{
name: "The Mismatched Socks",
wins: 0,
losses: 0
},
{
name: "The Awkward Turtles",
wins: 0,
losses: 0
}
];
// Create pairs from the groups
function makeMatches(array) {
return array.map((_, i) => (i % 2 === 0) ? [array[i], array[i + 1]] : []).filter(v => v.length === 2);
}
let matches = makeMatches(groups);
// Create a map of team names to their index
const groupIndexMap = {};
groups.forEach((group, index) => {
groupIndexMap[group.name] = index;
});
// Function to handle button clicks
function handleButtonClick(groupName) {
const matchIndex = groupIndexMap[groupName];
const match = matches.find(match => match.some(group => group.name === groupName));
if (!match) return;
match.forEach((group, button) => {
if (group.name === groupName) {
group.wins += 1;
} else if (group.losses < 2) {
group.losses += 1;
}
});
updateButtonTexts();
console.log(groups);
}
// Function to update button texts
function updateButtonTexts() {
groups.forEach((group, index) => {
const button = document.getElementById(`button${index + 1}`);
if (button) {
button.textContent = `${group.name} - Wins: ${group.wins} - Losses: ${group.losses}`;
}
if (group.losses == 2) {
button.textContent = 'Eliminated';
button.disabled = true;
}
});
}
// Function to reset all counters
function resetCounters() {
groups.forEach(group => {
group.wins = 0;
group.losses = 0;
});
updateButtonTexts();
}
// Initialize button click handlers
function initializeButtons() {
groups.forEach((group) => {
const button = document.querySelector(`[data-team-name='${group.name}']`);
if (button) {
button.onclick = () => handleButtonClick(group.name);
}
});
// Initialize reset button handler
document.getElementById('resetButton').onclick = resetCounters;
// Initial update of button texts
updateButtonTexts();
}
// Initial render and setup
initializeButtons();#group-buttons {
position: relative;
/* Container should be relative for positioning buttons absolutely */
width: 100%;
height: 500px;
/* Adjust height as needed */
border: 1px solid #ccc;
}
.group-button {
position: absolute;
/* Allows for free positioning */
cursor: pointer;
/* Indicates the element is clickable */
padding: 10px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
}
/* Example styles for individual buttons */
#button1 {
top: 50px;
left: 50px;
}
#button2 {
top: 50px;
left: 200px;
}
#button3 {
top: 150px;
left: 50px;
}
#button4 {
top: 150px;
left: 200px;
}
#button5 {
top: 250px;
left: 50px;
}
#button6 {
top: 250px;
left: 200px;
}
#button7 {
top: 350px;
left: 50px;
}
#button8 {
top: 350px;
left: 200px;
}<button id="resetButton">Reset All Counters</button>
<div id="group-buttons">
<button id="button1" class="group-button" data-team-name="Chaos Coordinators">Chaos Coordinators - Wins: 0 - Losses: 0</button>
<button id="button2" class="group-button" data-team-name="Sofa King Awesome">Sofa King Awesome - Wins: 0 - Losses: 0</button>
<button id="button3" class="group-button" data-team-name="The Nerd Herd">The Nerd Herd - Wins: 0 - Losses: 0</button>
<button id="button4" class="group-button" data-team-name="The Laughing Stock">The Laughing Stock - Wins: 0 - Losses: 0</button>
<button id="button5" class="group-button" data-team-name="Brainy Bunch Gone Wild">Brainy Bunch Gone Wild - Wins: 0 - Losses: 0</button>
<button id="button6" class="group-button" data-team-name="Cereal Killers">Cereal Killers - Wins: 0 - Losses: 0</button>
<button id="button7" class="group-button" data-team-name="The Mismatched Socks">The Mismatched Socks - Wins: 0 - Losses: 0</button>
<button id="button8" class="group-button" data-team-name="The Awkward Turtles">The Awkward Turtles - Wins: 0 - Losses: 0</button>
</div>
