witam,
Mam kilka plików HTML oraz podpięte pod nie pliki js.
Cała aplikacja jest spięta webpackie.
Jeden plik js (content.js) odpowiada za wyswietlenie treści, a także za wyświetlenie przycisku.
Drugi plik js (index.js) odpowiada za wyswietlenie treści (pop-up) z innego pliku HTML.
zasada działania:
Przycisk powinien wywołać funkcję (funkcja ta pobiera klase btn i za pomocą eventu wywołuje funkcje, która z kolei wywołuje funkcję zaimportowaną z pierwszego pliku (index.js), która uruchomi pop-up. Niestety, po przyciśnięciu przycisku wywoływany jest błąd Uncaught TypeError: Cannot read properties of null (reading 'classList'). Gdy wywołuję tą funkcję w index.js uruchamia się bez problemu.
kod z index.js
kod pobiera klasy z pliku index.html
function ff() {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded");
} else {
const showPopup = document.querySelector(".main-container__pop-up");
showPopup.classList.toggle("main-container__pop-up--show-modal");
}
}
export { ff };
kod z content.js
import { ff } from "./index.js";
const button = document.querySelector(".container__btn");
button.addEventListener('click', showModal)
async function showModal(){
ff()
}
Pytanie, jak zrobić by kod odpalany z content.js właściwie pobrał querySelector.