Блог

Главная - Вопросы по программированию - Кнопка Make отключена с помощью if и setAttribute

Кнопка Make отключена с помощью if и setAttribute

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я хочу, чтобы моя кнопка уменьшения стала отключенной, если количество элементов равно 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)
})

Где мне нужна помощь, так это как правильно написать оператор if с помощью setAttribute (и, возможно, removeAttribute на моей другой кнопке, которая увеличивает число?)

Ответ №1:

Вам нужно сравнивать с "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')
})

Комментарии:

1. Спасибо, все работает отлично. Чтобы добавить возможность изменения с помощью клавиатуры, могу ли я реализовать новое событие или добавить исключение?

2. Вы можете использовать keyup событие для document объекта. Возможно, вы захотите поместить общий код в отдельную функцию, чтобы вы могли вызывать ее из всех прослушивателей событий.