Как отключить элемент списка?

#javascript #listitem #disabled-control

Вопрос:

Я сейчас создаю конвертер валют, и я натыкаюсь на вопрос, который показывает, что я не могу прочитать свойство «Список классов» null. Я следую за видео на YouTube шаг за шагом. Интересно, в чем причина этой проблемы. Кто-нибудь может помочь, пожалуйста? Что я здесь делаю, так это в основном добавляю класс «отключено» в элемент списка, на который нажимается.

 function newCurrenciesListItem(currency) {
if (currenciesList.childElementCount === 0) {
    baseCurrency = currency.abbreviation;
    baseCurrencyAmount = 0;
}
addCurrencyList.querySelector(`[data-currency=${currency.abbreviation}]`)**.classList.add("disabled");**
const baseCurrencyRate = currencies.find(c => c.abbreviation === baseCurrency).rate;
const exchangeRate = currency.abbreviation === baseCurrency ? 1 : (currency.rate / baseCurrencyRate).toFixed(4);
const inputValue = baseCurrencyAmount ? (baseCurrencyAmount*exchangeRate).toFixed(4) : "";

currenciesList.insertAdjacentHTML("beforeend",
    `<li class="currency ${currency.abbreviation === baseCurrency ? "base-currency" : ""}" id=${currency.abbreviation}>
<img src=${currency.flagURL}  class="flag">
<div class="info">
    <p class="input"><span class="currency-symbol">${currency.symbol}</span><input type="text" placeholder="0.0000" value=${inputValue}></p>
    <p class="currency-name"${currency.abbreviation} - ${currency.name}</p>
    <p class="currency-rate">${exchangeRate} ${baseCurrency} = 1 ${currency.abbreviation}</p>
</div>
<span class="close">amp;times;</span>

`)
}

1. В какой строке вы получаете null ошибку? Как вы получаете ценность?

2. можете ли вы поставить свой код на stackblitz.com чтобы мы могли воспроизвести ошибку ?

3. добавление класса «отключено» ничего не отключает — вы хотите добавить атрибут «отключено», чтобы фактически отключить

Ответ №1:

 addCurrencyList.querySelector(`[datacurrency=${currency.abbreviation}]`).classList.add("disabled");

Здесь вы выбираете элемент с помощью селектора атрибутов, но он возвращает значение null, поскольку совпадение не найдено(или, скорее всего, элемент не существует). Проверьте, является ли элемент, который вы ищете, дочерним элементом addCurrencyList и имеет ли он атрибут data-currency с тем же значением, что и в параметре( currency.abbreviation ).

Прочтите это и это, чтобы узнать больше о том, как работают селекторы атрибутов CSS.

Цитата:

Объект списка узлов, представляющий первый элемент, соответствующий указанным CSS-селекторам. Если совпадения не найдены, возвращается значение null. Создает исключение SYNTAX_ERR, если указанный селектор(селекторы) недопустим.

Источник: https://www.w3schools.com/jsref/met_document_queryselector.asp