Wywołanie funkcji js. Różne plik

Rejestracja:prawie 3 lata
Ostatnio:prawie 3 lata
Postów:4

0

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

Kopiuj

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

Kopiuj

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.

edytowany 3x, ostatnio: Riddle 2022-06-10 13:05

katakrowa

2022-06-10 10:00

~~katakrowa~~2022-06-10 10:00

Rejestracja:ponad 10 lat
Ostatnio:około 2 lata
Lokalizacja:Chorzów
Postów:1670

1

Wrzuć wszystkie pliki łącznie z index.html. Użyj też formatowania kodu.

screenshot-20220610120056.png (4 KB) - ściągnięć: 13

qwee123

2022-06-10 10:07

qwee1232022-06-10 10:07

Rejestracja:prawie 3 lata
Ostatnio:prawie 3 lata
Postów:4

0

Kopiuj

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="main-page" content="web content" />
    <link rel="stylesheet" href="./src/scss/main.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,700;1,100&display=swap"
      rel="stylesheet"
    />

  </head>
  <body>
    <div class="main-container">
      <div class="main-container__content">
        <iframe
          title="main content"
          src="./content.html"
          frameborder="0"
          width="100%"
          height="1000"
          scrolling="no"
        ></iframe>
      </div>

      <div class="main-container__pop-up">
        <iframe
          title="pop-up module"
          src="./popUp.html"
          frameborder="0"
          width="100%"
          height="220"
          allowtransparency="yes"
          scrolling="no"
        ></iframe>
      </div>
    </div>
    <script type="module" src="./src/js/index.js" async defer></script>

  </body>
</html>

klasa .main-container__pop-up ma display: none. Z tym jest kłopot.

edytowany 3x, ostatnio: Riddle 2022-06-10 13:05

qwee123

2022-06-10 11:20

qwee1232022-06-10 11:20

Rejestracja:prawie 3 lata
Ostatnio:prawie 3 lata
Postów:4

0

Kopiuj

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Content</title>
        <meta name="content" content="web content">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./src/scss/main.css" />

    </head>
    <body>
        <div class="container">
            <div class="container__side-left">
              <img
                src="./images/sean-o-KMn4VEeEPR8-unsplash_1_s6zmfh_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg"
                alt="sunset image"
              />
            </div>
            <div class="container__side-right">
              <div class="container__heading">
                <h2></h2>
              </div>
              <div class="container__content">
              </div>
              <div class="container__button">
                <button class="container__btn" type="button">Button</button>
              </div>
            </div>
          </div>
          <script type="module" src="./src/js/content.js" async defer></script>


    </body>
</html>

popup.html

Kopiuj

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="Pop-up" content="Pop-up with counter" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./src/scss/main.css" />

  </head>
  <body>
    <div class="popup-container">
      <div class="popup-container__close-btn">
        <button class="popup-container__button" type="button">X</button>
      </div>
      <div class="popup-container__heading">
        <h2>Alert</h2>
      </div>
      <div class="popup-container__content">
      
    </div>

    <script type="module" src="./src/js/popup-modal.js" async defer></script>
  </body>
</html>

edytowany 2x, ostatnio: Riddle 2022-06-10 13:06

finito

2022-06-10 12:02

finito2022-06-10 12:02

Rejestracja:ponad 13 lat
Ostatnio:12 dni
Postów:684

0

@qwee123: Czegoś nie rozumiem. W tym ostatnim kodzie jest "popup-modal.js". Nie dałeś kodu tego pliku.
Sory, że nie wnoszę do Twojego problemu nic nowego, ale niestety musisz uporządkować ten kod, bo to co wrzuciłeś
to totalny misorder.

qwee123

2022-06-10 12:04

qwee1232022-06-10 12:04

Rejestracja:prawie 3 lata
Ostatnio:prawie 3 lata
Postów:4

0

finito napisał(a):

@qwee123: Czegoś nie rozumiem. W tym ostatnim kodzie jest "popup-modal.js". Nie dałeś kodu tego pliku.
Sory, że nie wnoszę do Twojego problemu nic nowego, ale niestety musisz uporządkować ten kod, bo to co wrzuciłeś
to totalny misorder.

Tak, ponieważ jest pusty. W pierwszym poscie jest zawartość 2 plików js o które chodzi.

finito

2022-06-10 12:32

finito2022-06-10 12:32

Rejestracja:ponad 13 lat
Ostatnio:12 dni
Postów:684

0

@qwee123: Tak przejrzałem to sobie i nie mam 100% pewności, ale wydaje mi się, że próbujesz łączyć programowanie asynchroniczne z synchronicznym. Bo z tego, co mi wiadomo, jeżeli korzystasz z async, to musisz też użyć await.
Tu masz link do dokumentacji: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Natomiast taki goły przykład:

Kopiuj

function DoSynchron(){
  //do something
}
async DoAsynchron(){
  const result = await DoSynchron();
}

Po prostu jeśli używasz async, to musisz też użyć await.

edytowany 1x, ostatnio: finito 2022-06-10 12:33

qwee123 2022-06-10 12:50

tak, niestety bez rezultatów.

finito 2022-06-10 13:03

@qwee123: Skasowałem mój komentarz, bo doszedłem do wniosku, że odpowiedź @Xarviel jest bardziej wartościowa.

Xarviel

2022-06-10 12:56

Xarviel2022-06-10 12:56

Rejestracja:ponad 3 lata
Ostatnio:około 11 godzin
Postów:847

1

Ten kod JavaScript jest wywoływany wewnątrz iframe'a?

qwee123 napisał(a):

Kopiuj

<div class="main-container">
 <div class="main-container__content">
   <iframe
     title="main content"
     src="./content.html"
     frameborder="0"
     width="100%"
     height="1000"
     scrolling="no"
   ></iframe>
  </div>

 <div class="main-container__pop-up">
  <iframe
     title="pop-up module"
     src="./popUp.html"
     frameborder="0"
     width="100%"
     height="220"
     allowtransparency="yes"
     scrolling="no"
   ></iframe>
 </div>
</div>

Bo jeśli tak to document.querySelector nam nie zadziała jeśli próbujesz odwołać się poza znacznik iframe. Czyli przykładowo wewnątrz iframe, nie pobierzesz w taki sposób diva o klasie main-container.

Są 2 rozwiązania

Skasować ten iframe jeśli jest niepotrzebny i przenieść cały html do tego samego pliku
Spróbować z window.parent.document.querySelector('.main-container__pop-up'), ale nigdy nie musiałem z tego korzystać i nie wiem, czy zadziała w tym wypadku (https://developer.mozilla.org/en-US/docs/Web/API/Window/parent)

Jeśli window.parent.document.querySelector będzie działać to Twoja funkcja powinna wyglądać mniej więcej tak

Kopiuj

function ff() {
   const showPopup = window.parent != window.top
     ? window.parent.document.querySelector(".main-container__pop-up") 
     : document.querySelector(".main-container__pop-up");
     
   showPopup.classList.toggle("main-container__pop-up--show-modal");
}

Wwarunek window.parent != window.top jest po to, żeby wykryć, czy funkcja ff jest wywoływana wewnątrz iframe, czy poza iframe.

edytowany 2x, ostatnio: Xarviel 2022-06-10 13:00

qwee123 2022-06-10 13:07

Xarviel, wielkie dzięki ! odwołanie się do window.parent.document.querySelector zadziałało.

Xarviel 2022-06-10 13:11

Skoro pomogło to możesz zaakceptować moją odpowiedź :p Z prawej strony masz przycisk

Wywołanie funkcji js. Różne plik

qwee123

katakrowa

qwee123

qwee123

finito

qwee123

finito napisał(a):

finito

Xarviel

qwee123 napisał(a):

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami