I've been making a rock-paper-scissors mini app which is split into two which 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 i try 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:
Access to script at 'file:///C:/Users/tecnico/Desktop/Proyectos%20de%20programacion/Piedra,%20Papel%20o%20Tijeras/main.js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
GET file:///C:/Users/tecnico/Desktop/Proyectos%20de%20programacion/Piedra,%20Papel%20o%20Tijeras/main.js/main.js net::ERR_FAILED
If anyone knows what is happening, please explain to me what is happening and why.
"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");
export let playerOne= {
name: loginPlayerOne(),
turn: true,
option: "",
points: 0,
}
export let playerTwo= {
name: loginPlayerTwo(),
play: playingPlayer(),
turn: false,
option: "",
points: 0,
}
export 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();
})
};
<!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 type="module" defer src="../main.js/main.js"></script>
</body>
</html>
"use strict";
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);
});
};
}
<!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 type="module" src="../main.js/box.js" ></script>
</body>
</html>
What you are having is a CORS error, you can read about CORS here
Some browsers do not allow importing javascript documents working directly on the file system, you need to use a web server to serve your project. if you have apache installed place your project inside the apache folder and access via localhost, or you can use some other web server. if you use npm you can use http-server .
This is the route that shows you
'file:///C:/Users/tecnico/Desktop/Proyectos%20de%20programacion/Piedra,%20Papel%20o%20Tijeras/ main.js/main.js'
You just have a bad route
in your code I can see some routes like this
I think the following change would suffice
Note that passing data from one html to another is not done through js files, there are other methods such as using localstorage or cache or states in the backend