I have been trying to do something like this.
I have a working code, (this is just example), when I click on the button the game starts.
In this example I have a loop, that if condition is true, I want to disable the option to click on the button.
I have seen that this el.disabled = true; / e.disabled = true; / td.disabled = true; (Is it possible to disable onclick without altering its function?) should do the job, but this doesn't work for me. Why is that? Or maybe there is another way to do that? (this is not the whole code, only the important parts)
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
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)
}
ChessTable.appendChild(tr);
}
center.appendChild(ChessTable);
ChessTable.setAttribute('cellspacing', '0');
ChessTable.setAttribute('width', '270px');
document.body.appendChild(center);
}
var counterforplayer = 0;
function s(e) {
event.target.style.backgroundColor = "green";
if (counterforplayer >= 5) {
alert("you cannot play anymore")
e.disabled = true;
counterforplayer++;
}
}
}
</script>
<button onclick="startgame()">Click me to start a new game</button>
<div id="container">
<div id="ph1">
</div>
</div>
</body>
</html>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++;
}
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>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:
counterforplayer inside the if that checks if it's more than 5.td to the tr.td to 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>