He estado atascado en esto durante una buena hora ahora y sé que es algo tan simple pero no puedo entenderlo 🤦🏽
Entonces, ambas variables que configuré en el constructor no están definidas fuera del constructor cuando las llamo.
Este es un archivo js que finalmente se usa para un componente de búsqueda en un sitio de Shopify. ¡Gracias por adelantado!
Vea el código a continuación:
class PredictiveSearch extends HTMLElement { constructor(){ super(); //Set elements this.searchBtn = this.querySelector('#search-btn'); this.searchContainer = this.querySelector('#main-search_wrapper'); // Set event listeners this.searchBtn.addEventListener("click", this.openSearch); } // Open search overlay openSearch(){ console.log(this.searchContainer); this.searchContainer.style.display = "block"; } } customElements.define('predictive-search', PredictiveSearch);Es probable que su HTML no se haya cargado cuando se llama openSearch() . Compruebe si los elementos se han cargado primero antes de llamar a la función.
loading = setInterval(() => { if (document.getElementById("main-search_wrapper")) { openSearch(); clearInterval(loading); } }, 100); Si esto no funciona, intente vincular openSearch() a this en el constructor para asegurarse de this sea correcto.
function constructor() { ... this.searchContainer = this.querySelector('#main-search_wrapper'); const openSearch = (() => { console.log(this.searchContainer); this.searchContainer.style.display = "block"; }).bind(this); }Creo que this se debe a que no se refiere a la clase/instancia de la clase cuando está dentro de la función constructor() . Creo que se refiere a la función en sí.