#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
объекта. Возможно, вы захотите поместить общий код в отдельную функцию, чтобы вы могли вызывать ее из всех прослушивателей событий.