Я не могу достать элемент из HTML с помощью Javascript - PullRequest
Новая
       10

Я не могу достать элемент из HTML с помощью Javascript

0 голосов
/ 19 марта 2019

Я хочу создать проект с использованием цветов.

Все мои файлы находятся в одной папке.

Я не могу получить доступ к вводу моего цвета, который находится в индексе.html by: 

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

Я могу просто найти элементы, которые есть в game.js.

Также мой холст находится в 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>

1 Ответ

0 голосов
/ 19 марта 2019

Вы не передаете данные из своего index.html в game.html.Поэтому, когда вы вызываете это:

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

Вы загружаете новую страницу, которая удаляет все ваши существующие переменные, включая 'color1'.

Я вижуЗдесь 2 варианта:

  1. Сделать это одностраничное веб-приложение.Поэтому, когда вы нажимаете кнопку «СТАРТ», она скрывает индексный div и загружает игровой div
  2. . Сохраните ваши значения где-нибудь из index.html (хранилище браузера?) И затем вызовите его после загрузки новой страницы game.html..
...