Up until a couple days ago JavaScript stopped loading with my HTML file and is making it harder to work on my project. I have tried clearing the cache, trying it on Safari and restarting my computer with no luck. Only errors I am getting are from the developer tools in Chrome stating an uncaught reference error (comes up when the button is clicked). Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="GameManager.js"></script>
<script src="jquery-3.6.0.js"></script>
<link rel="stylesheet" type="text/css" href="soloLeveling.css">
<title>Solo Leveling Game</title>
</head>
<body>
<div id="mainMenu">
<div id="backstory">
<h1><U>Backstory</U></h1>
<p>A very simple game which follows the story line of Solo Leveling by Chu-Gong in which a player will be able to progress through various levels and dungeons to become the strongest!</p>
</div>
<div id="howToPlay">
<h2>How to Play</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id illum et blanditiis commodi. Placeat eaque temporibus dolorem illo, officiis reprehenderit, neque fuga sint doloremque voluptate facere ut labore dolorum explicabo.</p>
</div>
<div><button onclick="playButton()">Enter the dungeon</button></div>
</div>
<div id = "gameBoard">
<div id ="enemy">Box</div>
<div id ="enemy">Box</div>
<div id ="enemy">Box</div>
<div id ="break">Empty Row</div>
<div id ="player">Player
<a href="#"><img src="Enemies/JinWoo.png" alt="Jin_Woo"></a>
</div>
<div id ="break">Another empty Box</div>
<div id ="enemy">Stats</div>
</div>
and the JS as well:
window.onload = function(){
preloadImg();
$("#mainMenu").show();
$("#gameBoard").hide();
}
function playButton(){
$("#mainMenu").hide();
$("#gameBoard").show();
startGame();
}
By standard you should put your scripts the end before the </body> tag and make sure to put them in the correct order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="soloLeveling.css">
<title>Solo Leveling Game</title>
</head>
<body>
<div id="mainMenu">
<div id="backstory">
<h1><U>Backstory</U></h1>
<p>A very simple game which follows the story line of Solo Leveling by Chu-Gong in which a player will be able to progress through various levels and dungeons to become the strongest!</p>
</div>
<div id="howToPlay">
<h2>How to Play</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id illum et blanditiis commodi. Placeat eaque temporibus dolorem illo, officiis reprehenderit, neque fuga sint doloremque voluptate facere ut labore dolorum explicabo.</p>
</div>
<div><button onclick="playButton()">Enter the dungeon</button></div>
</div>
<div id = "gameBoard">
<div id ="enemy">Box</div>
<div id ="enemy">Box</div>
<div id ="enemy">Box</div>
<div id ="break">Empty Row</div>
<div id ="player">Player
<a href="#"><img src="Enemies/JinWoo.png" alt="Jin_Woo"></a>
</div>
<div id ="break">Another empty Box</div>
<div id ="enemy">Stats</div>
</div>
<script src="jquery-3.6.0.js"></script> <!-- jquery goes first so references are not undefined -->
<script src="GameManager.js"></script>
</body>
Instead of using window.onload, and since you're using jQuery, you should initialize your script as such
$(document).ready(function () {
function preloadImg() {
// move your function's code here
}
preloadImg();
$("#mainMenu").show();
$("#gameBoard").hide();
function playButton(){
$("#mainMenu").hide();
$("#gameBoard").show();
startGame();
}
$("#howToPlay button").on('click', playButton); // took the liberty to add the event listener to your start button
});