JavaScript动态更新选项异常：第二轮Players选项不显示求助

根因分析 #

创建新轮次时，你会把玩家选项容器的ID从players改为players${roundCount}（比如第二轮是players2），但在updatePlayersOptions函数中，依然用roundContainer.querySelector('#players')查找该容器——ID已经变化，自然找不到元素，无法生成并插入玩家数量选择按钮。

修复方案 #

给玩家选项容器添加专属类名（比如players-container），通过类选择器定位容器，摆脱对ID的依赖，这样无论ID如何修改，都能正确找到目标元素。

修改后的完整代码 #

HTML部分

给玩家容器添加类名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Rounds Configuration</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="left-side">
            <div class="rounds-container">
                <div class="round">
                    <h2>Round 1</h2>
                    <div class="options">
                        <label>Map:</label>
                        <button class="map-option" data-value="12D">12D</button>
                        <button class="map-option" data-value="LandRush">Land Rush</button>
                        <button class="map-option selected" data-value="Other">Other</button>
                    </div>

                    <div class="options">
                        <label>Players:</label>
                        <!-- 添加players-container类名 -->
                        <div id="players" class="players-container"></div>
                    </div>

                    <div class="options">
                        <label>Teams:</label>
                        <button class="team-option" data-value="Singles">Singles</button>
                        <button class="team-option" data-value="Doubles">Doubles</button>
                        <button class="team-option" data-value="Triples">Triples</button>
                        <button class="team-option" data-value="Quads">Quads</button>
                        <button class="team-option" data-value="Fivers">Fivers</button>
                        <button class="team-option" data-value="Sixers">Sixers</button>
                        <button class="team-option" data-value="Crusades">Crusades</button>
                    </div>
                </div>
            </div>
            <button id="addRound2">Add Another Round</button>
        </div>
        <div class="right-side">
            <label>Number of Winners:</label>
            <div id="numWinners"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分

修改updatePlayersOptions中查找容器的语句，改用类选择器：

document.addEventListener('DOMContentLoaded', function() {
    let roundCount = 1;
    const roundsContainer = document.querySelector('.rounds-container');
    const firstRound = document.querySelector('.round');

    function updateTeamsOptions(selectedPlayers, roundContainer) {
        const teamSizes = {
            'Singles': 1,
            'Doubles': 2,
            'Triples': 3,
            'Quads': 4,
            'Fivers': 5,
            'Sixers': 6,
            'Crusades': 12
        };

        roundContainer.querySelectorAll('.team-option').forEach(option => {
            const teamSize = teamSizes[option.getAttribute('data-value')];
            if (selectedPlayers % teamSize === 0 && selectedPlayers / teamSize >= 2) {
                option.disabled = false;
            } else {
                option.disabled = true;
                option.classList.remove('selected');
            }
        });
    }

    function updatePlayersOptions(mapValue, roundContainer) {
        let playerOptions = '';
        const maxPlayers = mapValue === 'Other' ? 24 : 12;

        for (let i = 2; i <= maxPlayers; i++) {
            playerOptions += `<button class="player-option" data-value="${i}">${i}</button>`;
        }

        // 改用类选择器查找玩家容器
        const playersContainer = roundContainer.querySelector('.players-container');
        if (playersContainer) {
            playersContainer.innerHTML = playerOptions;
        }

        roundContainer.querySelectorAll('.player-option').forEach(option => {
            option.addEventListener('click', function() {
                clearSelected(roundContainer.querySelectorAll('.player-option'));
                this.classList.add('selected');
                updateTeamsOptions(parseInt(this.getAttribute('data-value')), roundContainer);
            });
        });
    }

    function clearSelected(buttons) {
        buttons.forEach(btn => btn.classList.remove('selected'));
    }

    function initializeEventListeners(roundElement) {
        roundElement.querySelectorAll('.map-option').forEach(option => {
            option.addEventListener('click', function() {
                const roundContainer = this.closest('.round');
                clearSelected(roundContainer.querySelectorAll('.map-option'));
                this.classList.add('selected');
                updatePlayersOptions(this.getAttribute('data-value'), roundContainer);
            });
        });

        roundElement.querySelectorAll('.team-option').forEach(option => {
            option.addEventListener('click', function() {
                if (!this.disabled) {
                    const roundContainer = this.closest('.round');
                    clearSelected(roundContainer.querySelectorAll('.team-option'));
                    this.classList.add('selected');
                }
            });
        });
    }

    function createRound() {
        roundCount++;
        const roundTemplate = firstRound.cloneNode(true);

        roundTemplate.querySelector('h2').textContent = `Round ${roundCount}`;
        roundTemplate.querySelector('#players').id = `players${roundCount}`;
        roundTemplate.querySelectorAll('button').forEach(button => {
            button.classList.remove('selected');
            if (button.classList.contains('team-option')) {
                button.disabled = true;
            }
        });

        const mapOptions = roundTemplate.querySelectorAll('.map-option');
        mapOptions.forEach(btn => btn.classList.remove('selected'));
        const defaultMapButton = roundTemplate.querySelector(`.map-option[data-value="Other"]`);
        if (defaultMapButton) {
            defaultMapButton.classList.add('selected');
            updatePlayersOptions('Other', roundTemplate);
        }

        const deleteButton = document.createElement('button');
        deleteButton.textContent = `Delete Round ${roundCount}`;
        deleteButton.addEventListener('click', function() {
            roundsContainer.removeChild(this.parentElement);
            roundCount--;
        });
        roundTemplate.appendChild(deleteButton);

        initializeEventListeners(roundTemplate);

        roundsContainer.appendChild(roundTemplate);
    }

    const addRoundButton = document.getElementById('addRound2');
    addRoundButton.addEventListener('click', createRound);

    initializeEventListeners(firstRound);
    updatePlayersOptions('Other', firstRound);
});

CSS部分（无需修改）

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.left-side, .right-side {
    flex: 1;
    padding: 20px;
}

.rounds-container {
    margin-bottom: 20px;
}

.options {
    margin-bottom: 20px;
}

.options label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

button {
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button:hover {
    background-color: #e0e0e0;
}

.selected {
    background-color: #4CAF50;
    color: white;
}

h2 {
    color: #333;
    margin-bottom: 20px;
}

#addRound2 {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
}

#addRound2:hover {
    background-color: #45a049;
}

.right-side label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#numWinners {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

内容的提问来源于stack exchange，提问作者Bubba