I want to make it so when the user clicks the checkbox , the player Two input goes disabled. My problem is that the input remains disabled in both cases, doesn't matter if checkbox is checked or not.
const Initialization = (function() {
p1 = '';
p2 = '';
const playerOne = document.querySelector('#player1')
const playerTwo = document.querySelector('#player2')
const checkAI = document.querySelector('#computer')
const startButton = document.querySelector('#start')
startButton.addEventListener('click', () => {
p1 = Player(playerOne.value)
p2 = Player(playerTwo.value)
})
if (checkAI.checked = true) {
playerTwo.disabled = true;
} else {
playerTwo.disabled = false;
}
return {
p1,
p2,
}
})();<label>Computer: <input type="checkbox" id="computer"></label><br/>
<input type="text" id="player1"><br/>
<input type="text" id="player2"><br/>
<input type="button" id="start" value="Start" />worked by adding an eventListener to the checkbox.
checkAI.addEventListener('click',()=>{
if(checkAI.checked){
playerTwo.disabled = true;
}else{
playerTwo.disabled = false;
}
})
If you want to react on checkbox change you need to add event listener on this input. For example onclick or onchange. Take care to use comparaison operator in your if test checkAI.checked === true. You can find a JSFiddle
Event on checkbox input
You need an event handler and to test equality using == or ===
Here is a simpler version
const Initialization = function() {
const Player = str => console.log(str);
const playerOne = document.querySelector('#player1')
const playerTwo = document.querySelector('#player2')
const checkAI = document.querySelector('#computer')
const startButton = document.querySelector('#start')
let p1 = '';
let p2 = '';
startButton.addEventListener('click', () => {
p1 = Player(playerOne.value)
p2 = Player(playerTwo.value || "computer")
});
checkAI.addEventListener('click', (e) => {
const chk = e.target.checked;
playerTwo.disabled = chk;
if (chk) playerTwo.value="";
})
};
Initialization()<label>Computer: <input type="checkbox" id="computer"></label><br/>
<input type="text" id="player1"><br/>
<input type="text" id="player2"><br/>
<input type="button" id="start" value="Start" />