Zmienne po eksporcie stają się undefined

0

siemka,
mam problem ze zmiennymi w JSie- chce wyeksportować czas na stronie oraz imię gracza natomiast po przejściu na kolejną stronę (gamePage.js) i zaimportowaniu zmiennych stają się one "undefined"- poniżej kod, jakieś pomysły?

var timeStartPage;
var nameData;
var name;
startButton.onclick = function () {
  name = document.getElementById("nick");
  nameData = name.value.toString();
  timeStartPage = parseInt(getTimeSpentOnSite() / 1000).toString();
  console.log("time start page", timeStartPage);
  console.log("name", nameData);
  gamePage();
};
export { timeStartPage, nameData };
1

Ponieważ po przejściu na inną stronę zapewne strona się odświeża i skrypt JSowy ładuje się od nowa. Po odświeżeniu strony tracisz dane z pamięci. Jeśli tak jest i po przejściu na inną podstronę ładujesz inny plik html, to możesz użyć np. localStorage.

0

@Mietekk: No to nie wiem, jaka akcja wykonuje się po przejściu na inną stronę, z wklejonego kodu to nie wynika. I odpisuj w poście, a nie w komentarzu.

0

W JS nie ma referencji jak w C++. Jak coś importujesz to w przypadku typów prostych dostaniesz wartość jaką te zmienne miały w momencie importu.

0 
<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="./pages/startPage.css" />
  </head>
  <body id="body">
    <div id="app"></div>
    <script type="module" src="./pages/startPage.js"></script>
  </body>
</html>

startPage.js

import { getTimeSpentOnSite, startCounting } from "./timeCounter.js";

import { sendStats } from "./sendStats.js";
import { gamePage } from "./gamePage.js";

const app = document.getElementById("app");
var timeStartPage;
var nameData;
var name;

  startCounting();

  app.innerHTML = `
<section class="homeContainer" id="homeContainer">
  <div class="startButton">
    <img
      id="startButton"
      src="./assets/img/01/button_01.png"
      alt="startButton"
    />
    </div>
    <input type="text" name="nick" placeholder="Wpisz imię" class="nick" id="nick" required>
    <span class="error" id="errNick">*Błędne imię</span>
</section>
`;

  const startButton = document.getElementById("startButton");

  startButton.onclick = function () {
    name = document.getElementById("nick");
    nameData = name.value.toString();
    timeStartPage = parseInt(getTimeSpentOnSite() / 1000).toString();
    console.log("time start page", timeStartPage);
    console.log("name", nameData);
    gamePage();
  };

  sendStats("01startPage");
};

export { timeStartPage, nameData };

gamePage.js

import { timeStartPage, nameData } from "./startPage.js";

export function gamePage() {
   console.log("name", nameData);
   console.log("timeP1", timeStartPage);
}
1

No to przekaż name i time jako parametry do gamePage. a nie exportuj.

1 
import { timeStartPage, nameData } from "./startPage.js";

Tu widzę, że moduły się nawzajem importują (a -> b oraz b -> a). Raczej powinno się unikać cyklicznych importów, bo potem to się trudno utrzymuje i debuguje. I tak jak @szafran98 pisze, takie rzeczy lepiej podawać jako argument:

export function gamePage(nameData, timeStartPage) {
   console.log("name", nameData);
   console.log("timeP1", timeStartPage);
}

moduły są po to, żeby wprowadzić modularność, oddzielać jedne rzeczy od drugich, a nie po to, żeby robić sobie zmienne globalne na modułach. Bo jaki sens wtedy robić w ogóle moduły?

1 użytkowników online, w tym zalogowanych: 0, gości: 1