我无法使用 Javascript 从 HTML 获取元素

Question

我想创建一个使用颜色的项目。

我的所有文件都在同一个文件夹中。

我无法通过以下方式访问 index.html 中的我的颜色输入：

const firstColor = document.getElementById("color1").value;

我只能访问 game.js 中的元素。

我的canvas也在game.html.

我已将标签添加到我的所有 HTML 文件中。

我的index.html:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Cyber Bird</title>
  <link rel="stylesheet" href="main.css">
</head>
<body align="center">
  <div id="title">Cyber Bird</div>
  <div id="mainMenu">
    <div id="selectColors">
      <div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
      <span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
    <span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
    </div>
    <a href="game.html" class="button" id="startCyber">START</a>
  </div>
  <script src="src/game.js"></script>
</body>
</html>

我的game.html:

      <!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Cyber Bird</title>
     <link rel="stylesheet" href="main.css">
  </head>
  <body>
     <div id="container" align="center">
        <div id="scoreBoard">
           <div id="header">SCOREBOARD</div>
           <div id="description">Score: </div>
           <div id="score">0</div>
        </div>

        <canvas id="myCanvas" height="500" width="900"></canvas>
        <div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
        <div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
        <div class="helper" id="toSelect">select new <span><a href="index.html">COLORS</a></span></div>
     </div>
     <div id="darken"></div>
     <div id="gameOver" align="center">
           <div id="message">GAME OVER</div>
           <div id="yourScore">Your score is: <span id="finalScore"></span></div>
           <div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
     </div>
     <script src="game.js"></script>
  </body>
  </html>

Answer 1

您没有将数据从 index.html 传递到 game.html。所以当你这样称呼时：

<a href="game.html" class="button" id="startCyber">START</a>

您正在加载一个新页面，这将删除所有现有变量 - 包括 'color1'。

我在这里看到 2 个选项：

将其设为单页网络应用程序。因此，当您单击开始按钮时，它会隐藏索引 div 并加载游戏 div
从 index.html 某处（浏览器存储？）保存您的值，然后在加载新的 game.html 页面后调用它。

我无法使用 Javascript 从 HTML 获取元素

I can't reach an element from HTML by using Javascript

javascript

getelementbyid