如何禁用列表项？

问题描述

我现在正在构建一个货币转换器，我遇到了一个问题，该问题表明我无法读取 null 的属性“classList”。我一步一步地跟随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">&times;</span>

`) }

解决方法

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

这里您使用属性选择器选择一个元素，但它返回 null 因为没有找到匹配项（或者很可能该元素不存在）。检查您要查找的元素是否是 addCurrencyList 的子元素，并且它的属性 data-currency 的值是否与参数 (currency.abbreviation) 中的值相同。

阅读 this 和 this 以了解有关 CSS 属性选择器如何工作的更多信息。

引用：

一个 NodeList 对象，代表第一个匹配的元素 指定的 CSS 选择器。如果未找到匹配项，则返回 null。 如果指定的选择器无效，则抛出 SYNTAX_ERR 异常。

来源：https://www.w3schools.com/jsref/met_document_queryselector.asp