Hasta hace un par de días, JavaScript dejó de cargarse con mi archivo HTML y hace que sea más difícil trabajar en mi proyecto. Intenté borrar el caché, probarlo en Safari y reiniciar mi computadora sin suerte. Los únicos errores que recibo son de las herramientas de desarrollo en Chrome que indican un error de referencia no detectado (aparece cuando se hace clic en el botón). Aquí está mi 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>y el JS también:
window.onload = function(){ preloadImg(); $("#mainMenu").show(); $("#gameBoard").hide(); } function playButton(){ $("#mainMenu").hide(); $("#gameBoard").show(); startGame(); }Por norma, debe poner sus scripts al final antes de la etiqueta </body> y asegurarse de ponerlos en el orden correcto.
<!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> En lugar de usar window.onload , y dado que está usando jQuery, debe inicializar su secuencia de comandos como tal
$(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 });