JavaScript, чтобы отключить кнопку

Question

Я хочу, чтобы действие щелчка отключило кнопку при пятом щелчке, но я не могу заставить работать внутри Вот код 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";
  }
}

Тогда 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>

Answer 1

Есть несколько вещей, которые нужно немного изменить в вашем коде.В ваш HTML необходимо внести некоторые исправления, чтобы диапазон livedead не определялся внутри открывающего тега <button>.

Кроме того, отключение кнопки с помощью javascript выполняется путем установки поля disabled для этого объекта кнопок Node (т. Е. Не путем установки параметра innerHTML в значение отключено).

Я бы предложил несколькоизменения в вашем коде - ключевым является использование объекта MouseEvent.

В вашем случае это упростит отключение кнопки, которую нажимает ваш пользователь.Чтобы проиллюстрировать использование объекта MouseEvent, рассмотрим следующий код:

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>