Как отключить кнопку html вычитания при значении 0?

Question

Итак, я попробовал ответ по всему Интернету и не смог найти правильный ответ. Мой код:

HTML

<th scope="col">
  <button class="button" type="button" id="subButton"
   onclick="subStrength();" value="subtract">-</button>
</th>
<th>
  <span id="strength"></span>
</th>

JS:

function subStrength(){
  strength = strength - 1;
  document.getElementById("strength").innerHTML = strength;
}

function addStrength(){
  strength = strength + 1;
  document.getElementById("strength").innerHTML = strength;
}

Answer 1

Одним из подходов к этому может быть вызов методов setAttribute() или removeAttribute() для элемента кнопки для переключения состояния блокировки / включения кнопки в зависимости от значения переменной strength:

var strength = 0;

document.getElementById("strength").innerHTML = strength;

function updateButtonDisabled() {

  // If strength less than equal zero disable the button
  if(strength <= 0) {
    document.getElementById("subButton").setAttribute('disabled', 'disabled');
  }
  else {
    document.getElementById("subButton").removeAttribute('disabled');
  }
}

function subStrength(){
  strength = strength - 1;
  document.getElementById("strength").innerHTML = strength;
  
  updateButtonDisabled();
}

function addStrength(){
  strength = strength + 1;
  document.getElementById("strength").innerHTML = strength;
  
  updateButtonDisabled();
}

<th scope="col">
  <button class="button" type="button" id="subButton"
   onclick="subStrength();" value="subtract">-</button>
</th>
<th>
  <span id="strength"></span>
</th>
<th scope="col">
  <button class="button" type="button"
   onclick="addStrength();" value="add">+</button>
</th>

Answer 2

Сначала вам нужно иметь значение силы по умолчанию. Вот мой рабочий код:

strength = 5;
	function subStrength(){
		if(strength>0){
			strength = strength - 1;
	  		document.getElementById("strength").innerHTML = strength;
			if(strength==0){
				document.getElementById("subButton").disabled = true;
			}
		}
		
	  
	}

	function addStrength(){
		strength = strength + 1;
		document.getElementById("strength").innerHTML = strength;
		if(strength>0){
			document.getElementById("subButton").disabled = false;
		}
	}

<table>
		<thead>
			<tr>
				
				<th scope="col">
				  <button class="button" type="button" id="subButton"
				   onclick="subStrength();" value="subtract">-</button>
				</th>
				<th scope="col">
				  <button class="button" type="button"
				   onclick="addStrength();" value="add">+</button>
				</th>
				<th>
				  <span id="strength"></span>
				</th>

			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>

Answer 3

Вы должны быть в состоянии сделать:

if (strength === 0) {
  document.getElementById('subButton').disabled = true;
}

в силе.

Просто убедитесь, что установлено disabled = false, если сила> 0 в addStrength!