如何檢查元素是否存在于父元素中？我正在我的專案中實作產品數量的增加/減少按鈕。當用戶單擊這些按鈕時，我可以增加和減少數量。我有一個 _parentElement ，它呈現一個元素和資料以及錯誤訊息（這只會在出現錯誤時呈現）。我已將一個單擊事件附加到該 _parentElement（這在 DOM 中可見）并進行事件委托。
僅當在 _parentElement 中呈現錯誤訊息并且單擊 _parentElement 時，才會記錄此錯誤。
錯誤：Cannot read properties of null (reading 'innerHTML') at DetailView._handlerQuantity
這就是我所做的：
查看.js
import icons from 'url:../../icons/icons.svg';
export default class View {
_data;
renderError(message = this._errorMessage) {
const html = /*html*/ `
<div >
<svg >
<use xlink:href="${icons}#icon-warning"></use>
</svg>
<span >${message}</span>
</div>
`;
const markup = this._parseStringtoHTML(html);
this._parentElement.innerHTML = '';
this._parentElement.insertAdjacentElement('afterbegin', markup.body.firstElementChild);
}
}
DetailView.js
class DetailView extends View {
_parentElement = document.querySelector(".product__details");
_errorMessage = "We could'nt find the product. Please try another one!";
constructor() {
super();
this._addHandlerProductQuanity();
}
_handlerQuantity(e) {
const increase = e.target.closest(".btn__control--add");
const decrease = e.target.closest(".btn__control--minus");
let quantity = document.querySelector(".product__quantity");
const currentValue = Number(quantity.innerHTML) || 0;
if (increase)
Number(quantity.innerHTML) < this._data.stocks
? (quantity.innerHTML = currentValue 1)
: 1;
if (decrease)
Number(quantity.innerHTML > 1)
? (quantity.innerHTML = currentValue - 1)
: 1;
}
_addHandlerProductQuanity() {
this._parentElement.addEventListener(
"click",
this._handlerQuantity.bind(this)
);
}
}
HTML：
<main class="main min-h-[calc(100vh-5rem)] sm:min-h-[calc(100vh-8rem)]">
<section class="product__details min-h-[inherit]">
<!-- PRODUCTS DETAILS WILL GO HERE... -->
</section>
</main>
uj5u.com熱心網友回復：
而不是這個：
const currentValue = Number(quantity.innerHTML) || 0;
你可以這樣做：
const currentValue = Number(quantity?.innerHTML ?? 0);
在嘗試獲取右側的屬性（ ）之前，?.它將基本上檢查左側的物件是否存在（在本例中為）。如果它不存在，那么它將回傳。然后意志開始并回傳。quantityinnerHTMLundefined??0
這解決了獲取當前值的問題。
但是，您正在嘗試為可能不存在的事物設定值。這是個壞訊息。有幾種方法可以解決它，但最好的方法可能是檢查它是否是錯誤的，如果是，請繼續創建它：
if (!quantity) {
// code to create quantity and apparent it to its parent here
// don't forget to set its default value to 0.
// and assign it to quantity
}
或者，更好的是：
const quantity = document.querySelector('.product__quantity') ?? createQuantity();
// createQuantity() being the function that creates and returns the element.
如果您將該塊放在該const currentValue行之前，則不必執行處理 null 的操作，只需執行以下操作：
const currentValue = Number(quantity.innerHTML);
另外，我不確定你想要這個位做什么：
Number(quantity.innerHTML) < this._data.stocks
? (quantity.innerHTML = currentValue 1)
: 1;
但是它是怎么寫的，最后一個1被扔掉了，什么也沒做，所以，假設你只想增加數量，如果它少于當前庫存，你應該把它重寫為：
currentValue < this._data.stocks && (quantity.innerHTML = currentValue 1);
（另外，只有小于，不小于或等于？）
旁注：您可能應該使用.textContentor.innerText而不是.innerHTML獲取數量，因為您不想要任何可能掛在那里的 HTML，只有文本值。更好的是，根本不決議文本，只需將值存盤為您在更改時寫出的屬性：
// initialize
quantity.value = 0;
// increment
quantity.value ;
quantity.innerText = quantity.value;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/456223.html
標籤：javascript 哎呀