I've been making a rock-paper-scissors mini app that splits into two that are in two html files (main.html and options.html). The parts of this project are:
The "login" and the "game" itself
the problem is that the elements of one html file are not read or recognized by the other html file. Now what I am trying is to connect each html with different js files but import the data I need from one file into another. My problem is that I want to export some objects from a js file (main.js) to another js file (box.js) and it tells me the following error in the main.js (where the objects to export are located)
Uncaught SyntaxError: Unexpected token 'export'
And this error in the box.js (where I want to import the objects).
Uncaught SyntaxError: Cannot use import statement outside a module
If someone knows what happens with the export and import or knows a better solution to this problem, I would greatly appreciate it.
<!--parte login-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css/style.css">
<title>Rock Paper or Scissors</title>
</head>
<body>
<div class="principalContainer" >
<h1 class="title">Rock Paper or Scissors Game</h1>
<div class="players">
<div class="playerOne" id="playerOne"><p class="text-player">Put Your Name Player One</p>
<input type="text" name="" id="input" placeholder="Put your name here"><i class="plusButton" id="plusButton"><p class="plus">+</p></i>
</div>
<div id="oponente" class="oponent">
<a href="#oponente"><input type="button" id="computer" value=".VS Computer"></a><a href="#playertwo"><input type="button" id="player" value=" .VS Player"></a>
</div>
<div id="playertwo" class="playerTwo">
<p class="text-player-two">Put Your Name Player Two</p>
<input type="text" name="" id="input-two" placeholder="Put your name here"><i class="plusButton-two" id="plusButton-two"><p class="plus-two">+</p></i>
</div>
</div>
<div class="playLink">
<a href="options.html" class="game">Let´s Play Folks!</a>
</div>
</div>
<script src="../main.js/main.js"></script>
</body>
</html>
<!--parte juego-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css/gameStyle.css">
<title>Rock Paper or Scissors</title>
</head>
<body>
<div class="container">
<div class="scoreboard">
<p class="points" id="points">0:0</p>
</div>
<div class="playerPoints" id="playerPoints">
PlayerName
</div>
<div class="enemyPoints" id="enemyPoints">
Computer
</div>
<div>
<p class="turnText" id="turnText">
Your turn Player 1</p>
</div>
<div class="options">
<div class="rockContainer">
<img src="../img/fist.png" alt="rock" class="rock" id="rock">
</div>
<div class="paperContainer">
<img src="../img/hand.png" alt="paper" class="paper" id="paper">
</div>
<div class="scissorsContainer">
<img src="../img/scissors.png" alt="scissors" class="scissors" id="scissors">
</div>
</div>
<div class="alert">
<p class="winner" id="winner">Paper cover Rock. You won player one!</p>
<a href="main.html" class="newGame" id="newGame">Lets go to the menu!</a>
</div>
<div class="seeStats">
<a href="#stats" class="statsButton">See Stadistics</a>
</div>
<div id="stats" class="modal" onload="stadistics()">
<a href="#"><img src="../img/x-mark.png" alt="exit" class="exit"></a>
<div class="stats">
<img src="../img/refresh.png" alt="refresh" class="refresh" id="refresh">
<p class="statsTitle">Stadistics</p>
<ul class="gameList" id="gameList">
<!--<li>
<p class="player">Player1</p>
<p class="finalScore">0:3</p>
<p class="secondPlayer">Player2</p>
</li>-->
</ul>
</div>
</div>
</div>
<script src="../main.js/box.js"></script>
</body>
</html>
"use strict";
//main.js
//selecting DOM elements
//login page
const firstInput= document.getElementById("input");
const firstPlusButton= document.getElementById("plusButton");
const compButton= document.getElementById("computer");
const playerButton= document.getElementById("player");
const secondInput= document.getElementById("input-two");
const secondPlusButton= document.getElementById("plusButton-two");
//game DOM elements
const playerName= document.getElementById("playerPoints");
const points= document.getElementById("points");
const enemyName= document.getElementById("enemyPoints");
const turnText= document.getElementById("turnText");
const rock= document.getElementById("rock");
const paper= document.getElementById("paper");
const scissors= document.getElementById("scissors");
const winnerText= document.getElementById("winner");
const menu= document.getElementById("newGame");
let playerOne= {
name: loginPlayerOne(),
turn: true,
option: "",
points: 0,
}
let playerTwo= {
name: loginPlayerTwo(),
play: playingPlayer(),
turn: false,
option: "",
points: 0,
}
let computer= {
name: "Computer",
play:playingComputer(),
turn: false,
option: "",
points: 0,
}
function loginPlayerOne(){
firstPlusButton.addEventListener("click",()=>{
playerOne.name= firstInput.value;
console.log(playerOne.name);
});
document.addEventListener("keyup",(event)=>{
if(event.keyCode===13){
playerOne.name= firstInput.value;
console.log(playerOne.name);
}
});
}
function loginPlayerTwo(){
playerButton.addEventListener("click",()=>{
secondPlusButton.addEventListener("click",()=>{
playerTwo.name= secondInput.value;
console.log(playerTwo.name);
})
document.addEventListener("keyup",(event)=>{
if(event.keyCode===13){
playerTwo.name= secondInput.value;
console.log(playerTwo.name);
}
})
})
}
function playingComputer(){
compButton.addEventListener("click",()=>{
console.log("Estas jugando contra la computadora");
versusComputer();
})
};
function playingPlayer(){
playerButton.addEventListener("click",()=>{
console.log("Estas jugando contra un jugador");
versusPlayer();
})
};
export {playerOne,playerTwo,computer};
import {playerOne,playerTwo,computer} from "./main.js";
//box.js
console.log(computer);
console.log(playerOne);
console.log(playerTwo);
//game DOM elements
const playerName= document.getElementById("playerPoints");
const points= document.getElementById("points");
const enemyName= document.getElementById("enemyPoints");
const turnText= document.getElementById("turnText");
const rock= document.getElementById("rock");
const paper= document.getElementById("paper");
const scissors= document.getElementById("scissors");
const winnerText= document.getElementById("winner");
const menu= document.getElementById("newGame");
function versusPlayer(){
playerName.innerHTML= playerOne.name;
if(playerOne.turn===true){
rock.addEventListener("click",()=>{
console.log("rock")
playerOne.option= "rock";
playerOne.turn= false;
console.log(playerOne.option);
console.log(playerOne.turn);
});
paper.addEventListener("click",()=>{
playerOne.option= "paper";
playerOne.turn= false;
console.log(playerOne.option);
console.log(playerOne.turn);
});
};
}
See, I was doing some research and found this page that says how to solve it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
type="module"
You have to place the attribute in the two tags in the script tag and that's it.I also had the same problem. It turns out that the JS modules only work under HTTP communication, this means that they only work when they are shared between a server and a client under that protocol, the solution of adding the attribute
type=module
takes effect in an installed client-server structure.I leave you the reference if you want to know more: https://javascript.info/modules-intro#what-is-a-module
On the other hand, if you want your code to work locally using modules, deploy
webpack
(which is a module bundler, this unifies all your JS source files into a single file usually calledmain.js
) in your directory.Here is the documentation to install and configure https://webpack.js.org/guides/getting-started/