How to disable onclick in JavaScript?
You should be setting disabled on the element. You need to check to see if that element is disabled.
function clickedElem (event) {
const clickedElem = event.target;
if (clickedElem.disabled) { return false; }
if (counterForPlayer >= 5) {
alert("you cannot play anymore")
clickedElem.disabled = true;
return false;
}
counterForPlayer++;
}
Give the button an ID. Then you can use document.getElementById() to get the button and disable it.
You had a number of other problems:
- you only incremented
counterforplayerinside theifthat checks if it's more than 5. - You never appended the
tdto thetr. - There's nothing in the
tdto click on (but maybe your real application makes it visible with CSS).
function startgame() {
var ChessTable;
var counter = 0;
var center = document.createElement('center');
ChessTable = document.createElement('table');
for (var i = 0; i < 8; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 8; j++) {
var td = document.createElement('td');
td.setAttribute('id', counter)
td.addEventListener('click', s)
td.innerText = "X";
tr.appendChild(td);
}
ChessTable.appendChild(tr);
}
center.appendChild(ChessTable);
ChessTable.setAttribute('cellspacing', '0');
ChessTable.setAttribute('width', '270px');
document.body.appendChild(center);
}
var counterforplayer = 0;
function s(e) {
e.target.style.backgroundColor = "green";
if (counterforplayer >= 5) {
alert("you cannot play anymore")
document.getElementById("startbutton").disabled = true;
}
counterforplayer++;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="startbutton" onclick="startgame()">Click me to start a new game</button>
<div id="container">
<div id="ph1">
</div>
</div>
</body>
</html>You can actually wire up multiple functions that respond to an event, using addEventListener. Additionally, you can choose to stop a listener by calling removeEventListener. This also allows you to set that functionality back in again, by just calling addEventListener again, and passing in the original function.
const testButton = document.getElementById("testButton");
const testOutput = document.getElementById("testOutput");
const stopIncrementOutput = () => {
testButton.removeEventListener("click", incrementOutput);
};
let output = 0;
const incrementOutput = () => {
testOutput.innerText = output++;
if (output > 5) {
stopIncrementOutput();
}
};
testButton.addEventListener("click", incrementOutput);<div>
<button id="testButton">Test button</button>
<span id="testOutput"></span>
</div>