How to pass a variable from one Javascript file to another?

Asked

Viewed 299 times

0

I’m a beginner in Javascript and decided to try a Memory Game to test my skills. My idea is the following: make an HTML page that will be the menu (where players will insert the names and the script will test if they are valid) and another page where the game would actually happen. After the names are entered, the script deletes the entire page and creates an element <iframe> that loads the page where the game takes place.

It turns out that the variables where the entered names are saved are in the first Javascript file - the menu page -, and I would like to send them to the second Javascript file, to manipulate them inside.

I did some research on the Internet and tried to use export and import, but made the mistake Uncaught SyntaxError: Unexpected token 'export', then I don’t know what to do.

My codes:

Memorygame.html

<html>
    <head>
        <title>Memory Game</title>
        <link rel="stylesheet" href="MemoryGame.css">
    </head>
    <body id="gameBody">
        <div id="gameMenu">
            <h1>Memory Game</h1>
            <br>
            <p>Insert the name of the players:</p>
            <input type="text" placeholder="Player 1" id="pOneInput">
            <br>
            <input type="text" placeholder="Player 2" id="pTwoInput">
            <br> <br>
            <button onclick="verifyNames()">Start Game</button>
        </div>
        <script src="MemoryGame.js"></script>
    </body>
</html>

Memorygame.js

var pOneName = "Player 1";
var pTwoName = "Player 2";
var gameBodyPage = document.getElementById("gameBody");
var gameMenuPage = document.getElementById("gameMenu");

function verifyNames() {
    if (document.getElementById("pOneInput").value != "") {
        pOneName = document.getElementById("pOneInput").value;
    } else {
        pOneName = "Player 1";
    }
    
    if (document.getElementById("pTwoInput").value != "") {
        pTwoName = document.getElementById("pTwoInput").value;
    } else {
        pTwoName = "Player 2";
    }
    
    if (pOneName === pTwoName) {
        alert("The names can't be the same!");
    } else {
        startGame();
    }
}

function startGame() {
    gameBodyPage.removeChild(gameMenuPage);
    var gameCore = document.createElement("iframe");
    gameCore.setAttribute("src", "MemoryGame-core.html");
    gameCore.setAttribute("title", "Memory Game's Core");
    gameCore.setAttribute("width", "100%");
    gameCore.setAttribute("height", "100%");
    gameBodyPage.appendChild(gameCore);
}

Memorygame-core.html

<html>
    <head>
        <title>Memory Game</title>
        <link rel="stylesheet" href="MemoryGame-core.css">
    </head>
    <body>
        <div id="playerTurn"></div>
        <button onclick="chosenFigure(1)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(2)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(3)"><img src="" width="100" height="100"></button>
        <br>
        <button onclick="chosenFigure(4)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(5)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(6)"><img src="" width="100" height="100"></button>
        <br>
        <button onclick="chosenFigure(7)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(8)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(9)"><img src="" width="100" height="100"></button>
        <br>
        <button onclick="chosenFigure(10)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(11)"><img src="" width="100" height="100"></button>
        <button onclick="chosenFigure(12)"><img src="" width="100" height="100"></button>
        <script src="MemoryGame-core.js"></script>
    </body>
</html>

Some important information: I didn’t put the files .css because they only serve to center page elements. I also did not put the file MemoryGame-core.js because it is empty, since, given my problem, I did not proceed with writing the code. And the Urls of the archive images MemoryGame-core.html are empty because I will put later.

javascript variables

2 answers

0

To solve this mistake:

  Uncaught SyntaxError: Unexpected token 'export'.

one of the solutions would be:

<script type="module" src="nome-do-seu-modulo.js"></script>

  • If I understand correctly, it’s to put the script with the type "module", isn’t it? I tried that, but it didn’t work. Gave error "Access to script from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https.". If I’m not supposed to do this, I’m sorry, I’m very beginner in Javascript (and programming in general).

0

Make sure that the variable you want to use in two javascript files is not inside a function and link the two javascript files in the order

<script src="arquivo1.js"><script> //declara a variável aqui.
<script src="arquivo2.js"><script> // acessa ela aqui.

Browser other questions tagged javascript variables

You are not signed in. Login or sign up in order to post.