javascript to disable a button

Question

I want a click action to disable a button on the fifth click, but I can't get the to work inside the Here's the javascript...

var currentTurn = 1;

function taketurn(){
  currentTurn++;
  document.getElementById("turn").innerHTML = currentTurn;
  threeturns(currentTurn);
}
function threeturns(now) {
  if(now > 3){
    document.getElementById("livedead").innerHTML = "disabled";
  }
}

Then html

<div class="container">
<h1>turn <span id="turn">1</span></h1>
    <button onclick="taketurn()" type="button" class="btn btn-lg btn-info" <span id="livedead"></span> />  next</button>
    <button onclick="taketurn()" type="button" class="btn btn-lg btn-info" disabled>  next</button>
</div>

livedead is the id the <span> in your HTML, so document.getElementById("livedead") gets the span, not the button. You need to select the button. After that, you need to use createattribute to add the disabled attribute. innerHTML replaces all the inner HTML, so literally would just show the text "disabled" — Matthew Herbst
– Matthew Herbst, Commented Oct 21, 2018 at 19:28
@futureprogress there is an error in the syntax of your HTML, inside your first button. — Alessio Cantarella
– Alessio Cantarella, Commented Oct 21, 2018 at 19:32

Dacre Denny · Accepted Answer · 2018-10-21 20:25:08Z

There are a few things to change a little with your code. Some corrections need to be made to your HTML so that the livedead span is not defined inside the opening <button> tag.

Also, disabling a button with javascript is done by setting the disabled field on that buttons Node object (ie not by setting innerHTML to disabled).

I would suggest a few changes to your code - the key one being to use the MouseEvent object.

In your case, this would simplify disabling the button that your user is clicking. To illustrate the use of the MouseEvent object, consider this code:

var currentTurn = 1;

// add a parameter to function to give us access to the event
// for this click interaction
function taketurn(event){
	
  // if click count is 5 or more, then disable this button
  if(currentTurn >= 5) {
  
    // we access the button via the event parameter that we 
    // passed in. The currentTarget represents the button, so
    // we can set disabled on the button to disable it.
    event.currentTarget.disabled = 'disabled'
  }
   
  currentTurn ++;
  
  document.getElementById("turn").innerHTML = currentTurn;
}

<div class="container">
<h1>turn <span id="turn">1</span></h1>
    <!-- pass event defined for the click interaction, to taketurn() -->
    <button onclick="taketurn(event)" type="button" class="btn btn-lg btn-info" id="livedead">  next</button>
    <button onclick="taketurn()" type="button" class="btn btn-lg btn-info" disabled>  next</button>
</div>

Collectives™ on Stack Overflow

javascript to disable a button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related