时间戳

首页 > 解决方案 > 当我增加 textcontent 值时，减少按钮仍然被禁用

javascript - 当我增加 textcontent 值时，减少按钮仍然被禁用

问题描述

好吧，当 textcontent 值高于 1 时，我无法启用减小按钮。我的目标是通过启用减小按钮将值从 1 增加到一直向上，但是当我减小到 1 时，我希望禁用减小按钮.

var newDiv = document.createElement('div')
var increaseButton = document.createElement('button')
var decreaseButton = document.createElement('button')

newDiv.textContent = 1
document.body.appendChild(newDiv)
document.body.appendChild(increaseButton)
document.body.appendChild(decreaseButton)


increaseButton.setAttribute('id', 'increase')
decreaseButton.setAttribute('id', 'decrease')

if(Number(newDiv.textContent) == 1) {
    decreaseButton.setAttribute('disabled', '')
}else {
    increaseButton.removeAttribute('disabled')
}

increaseButton.onclick = () => {
    newDiv.textContent = Number(newDiv.textContent) + 1
}

decreaseButton.onclick = () => {
    newDiv.textContent = Number(newDiv.textContent) - 1
}

标签： javascriptdom

解决方案

https://jsfiddle.net/mLq5aknx/

var newDiv = document.createElement('div')
var increaseButton = document.createElement('button')
var decreaseButton = document.createElement('button')

newDiv.textContent = 1
document.body.appendChild(newDiv)
document.body.appendChild(increaseButton)
document.body.appendChild(decreaseButton)


increaseButton.setAttribute('id', 'increase')
decreaseButton.setAttribute('id', 'decrease')

function checkAndDisable() {
  if(Number(newDiv.textContent) == 1) {
    decreaseButton.setAttribute('disabled', '')
  }else {
     decreaseButton.removeAttribute('disabled')
  }
}

checkAndDisable();

increaseButton.onclick = () => {
    newDiv.textContent = Number(newDiv.textContent) + 1;
    checkAndDisable();
}

decreaseButton.onclick = () => {
    newDiv.textContent = Number(newDiv.textContent) - 1;
    checkAndDisable();
}

您需要确保调用该函数来检查值更改时是否应禁用它。另外，你错误地写了increaseButton.removeAttribute('disabled')

推荐阅读