CODEWITHSUNDEEP
javascript
MaROM
MaROM

Reputation: 95

How to disable onclick in JavaScript?

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>

Upvotes: 1

Views: 11083

Answers (4)

Abhish Abraham
Abhish Abraham

Reputation: 54

Whenever you create elements dynamically, you should never add events on every element. You should consider adding an event listener to the parent element and use event bubbling to catch the event. Ideally you should have only one click event listener attached to the body element of a page and get the event target using e.target to implement your specific use cases.

const body = document.querySelector('body').addEventListener('click', (e) => {
  const id = e.target.id;
  
  // handle button 1 click
  if(id === '1') {
    console.log('1 was clicked');
  } 
  
  // handle button 2 click
  if(id === '2') {
    console.log('2 was clicked');
  } 
  
  // handle button 3 click
  if(id === '3') {
    console.log('3 was clicked');
  } 
  
  // handle button 4 click
  // lets say this is the button you dont want to do anything 
  // so dont implement any functionality here
  if(id === '4') {
    
  } 
})
<body>
  <ul>
    <li><button id="1">1</button></li>
    <li><button id="2">2</button></li>
    <li><button id="3">3</button></li>
    <li><button id="4">4</button></li>
  </ul>
</body>

Upvotes: 0

GenericUser
GenericUser

Reputation: 3230

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>

Upvotes: 1

Barmar
Barmar

Reputation: 780724

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 counterforplayer inside the if that checks if it's more than 5.
  • You never appended the td to the tr.
  • There's nothing in the 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>

Upvotes: 1

epascarello
epascarello

Reputation: 207501

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++;
}

Upvotes: 1

Related Questions