时间戳

首页 > 解决方案 > 使用 if 和 setAttribute 禁用按钮

javascript - 使用 if 和 setAttribute 禁用按钮

问题描述

如果元素的数量为 1，我希望我的减少按钮被禁用。按钮不应该是 -1。但是例如应该使数字2变为1。

let element = document.createElement('div')
document.body.appendChild(element)
element.setAttribute('id', 'bet-size')
let text = document.createTextNode('1')
element.appendChild(text)

let click = document.createElement('input')
click.setAttribute('type', 'button')
click.setAttribute('id', 'decrease')
document.body.appendChild(click)

click.addEventListener('click', () => {
  element.textContent = Number(element.textContent) - 1
  if (element.textContent === 1) {
    click.setAttribute('disabled', true)
  } else if (element.textContent > 1)
    click.setAttribute('disabled', false)
})

我需要帮助的地方是如何使用 setAttribute 正确编写 if 语句（也许我的另一个按钮上的 removeAttribute 会增加数字？）

标签： javascripthtmldom

解决方案

您需要与 进行比较"0"，而不是1在禁用时进行比较。它必须是一个字符串，因为您===用于比较。

要启用该按钮，您必须使用removeAttribute.

let element = document.createElement('div')
document.body.appendChild(element)
element.setAttribute('id', 'bet-size')
let text = document.createTextNode('1')
element.appendChild(text)

let click = document.createElement('input')
click.setAttribute('type', 'button')
click.setAttribute('id', 'decrease')
click.value = "-";
document.body.appendChild(click)

click.addEventListener('click', () => {
  element.textContent = Number(element.textContent) - 1
  if (element.textContent === "0") {
    click.setAttribute('disabled', true)
  } else if (element.textContent > 1)
    click.removeAttribute('disabled')
})

let increase = document.createElement('input')
increase.setAttribute('type', 'button')
increase.id = 'increase';
increase.value = '+';
document.body.appendChild(increase);

increase.addEventListener('click', () => {
  element.textContent = Number(element.textContent) + 1
  if (element.textContent === "0") {
    click.setAttribute('disabled', true)
  } else if (element.textContent > 1)
    click.removeAttribute('disabled')
})

推荐阅读