¿Cómo puedo verificar un elemento si existe en el elemento principal? Estoy implementando un botón para aumentar/disminuir la cantidad de productos en mi proyecto. Puedo aumentar y disminuir la cantidad cuando el usuario hace clic en esos botones. Tengo un _parentElement que represento un elemento y datos y el mensaje de error (esto solo se representará cuando haya un error). Adjunté un evento de clic a ese _parentElement (esto es visible en el DOM) y realicé la delegación de eventos.
Este error solo se registrará cuando el mensaje de error se represente en _parentElement y cuando haga clic en _parentElement.
Error : Cannot read properties of null (reading 'innerHTML') at DetailView._handlerQuantity
Esto es lo que hice:
Ver.js
import icons from 'url:../../icons/icons.svg'; export default class View { _data; renderError(message = this._errorMessage) { const html = /*html*/ ` <div class="flex flex-col items-center justify-center gap-4 min-h-[inherit]"> <svg class="h-6 w-6 sm:h-10 sm:w-10 fill-red-600"> <use xlink:href="${icons}#icon-warning"></use> </svg> <span class="text-xl text-neutral-600 font-medium sm:text-xl xs:text-lg">${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>En lugar de esto:
const currentValue = Number(quantity.innerHTML) || 0;Puedes hacerlo:
const currentValue = Number(quantity?.innerHTML ?? 0); El ?. básicamente verificará si existe el objeto a la izquierda (en este caso, quantity ) antes de intentar obtener la propiedad a la derecha ( innerHTML ). Si no existe, devolverá undefined . El ?? luego se activará y devolverá 0 en su lugar.
Eso resuelve obtener el valor actual.
Pero entonces, estás tratando de establecer un valor para algo que podría no existir. Esas son malas noticias. Hay un par de formas de hacerlo, pero probablemente la mejor sería verificar si es falso y, si lo es, seguir adelante y crearlo:
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 }O mejor aún:
const quantity = document.querySelector('.product__quantity') ?? createQuantity(); // createQuantity() being the function that creates and returns the element. Si coloca ese bloque antes de la línea const currentValue , no tiene que hacer las cosas para manejar nulo y simplemente puede hacer:
const currentValue = Number(quantity.innerHTML);Además, no estoy seguro de lo que quieres que haga este bit:
Number(quantity.innerHTML) < this._data.stocks ? (quantity.innerHTML = currentValue + 1) : 1; Pero cómo está escrito, ese último 1 simplemente se desecha y no hace absolutamente nada, por lo que, suponiendo que solo desea incrementar la cantidad si es menor que las existencias actuales, debe reescribirlo para que sea:
currentValue < this._data.stocks && (quantity.innerHTML = currentValue + 1);(También, ¿solo menor que, no menor que o igual a?)
Nota al margen: probablemente debería usar .textContent o .innerText en lugar de .innerHTML para obtener la cantidad, ya que no desea ningún HTML que pueda estar colgando allí, solo el valor del texto. Aún mejor, no analice el texto en absoluto y simplemente almacene el valor como una propiedad que escribe cuando cambia:
// initialize quantity.value = 0; // increment quantity.value++; quantity.innerText = quantity.value; Para crear el elemento de quantity , puede hacer algo como esto:
function createQuantity() { // Use whatever element it should be const quantity = document.createElement('span'); quantity.classList.add('product__quantity'); // You'll probably need to tweak this to get it in the right spot __parentElement.appendChild(quantity); return quantity; }