So I am working on the TicTacToe game for the Odin Project. I have two different create Player buttons that I want to open the same modal dialog box so I can enter in two different parameters and have one save across both.When I put X as the marker for one player I want it to be (required?) inaccessible for the other player, so that the other player has to pick O.How do I do this?
HTML
<body>
<header> TIC-TAC-TOE</header>
<section id="large-container">
<article class="Players" id="1">
Player1
<button id="1">
Enter Player
</button>
</article>
<div class="container">
<div class="item"><button id="0">0</button></div>
<div class="item"><button id ="1">1</button></div>
<div class="item"><button id="2">2</button></div>
<div class="item"><button id="3">3</button></div>
<div class="item"><button id="4">4</button></div>
<div class="item"><button id="5">5</button></div>
<div class="item"><button id="6">6</button></div>
<div class="item"><button id="7">7</button></div>
<div class="item"><button id="8">8</button></div>
</div>
<article class="Players" id="2">
Player2
<button id="2">
Enter Player
</button>
</article>
<dialog class="PlayerDialog">
<form>
<p>
<label for="playerName">What is the Player's Name</label>
<input type="text" id="PName" name="PName">
<label for="playerMarker">What is the Players marker?
<select>
<option value="X" id="X" name="Marker">X</option>
<option value="O" id="O" name="Marker">O</option>
</select>
</label>
</p>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="Confirm" value="default">Confirm</button>
</form>
</dialog>
</section>
<script src="Main3.js"></script>
</body>
JS
const playerCreationButtons = document.querySelectorAll(".Players > button")
const playerCreation = document.querySelector(".PlayerDialog")
const PlayerDisplay = document.querySelector("article.Players")
const confirmBtn = document.querySelector("#Confirm")
const playerName = document.getElementById("#PName")
const playerMarkerX = document.getElementById("X")
playerCreationButtons.forEach((button)=>{
button.addEventListener("click", ()=>{
/// (Some code here to alter the modal for each player before it's shown)///
playerCreation.showModal()
console.log(`${button.id}`)
})
})