Ошибки не выданы, но я все еще не могу присвоить backgroundColor с переменной, содержащей строку RGB - PullRequest
Новая
       0

Ошибки не выданы, но я все еще не могу присвоить backgroundColor с переменной, содержащей строку RGB

0 голосов
/ 01 ноября 2018

Итак, я пытаюсь создать простую игру с угадыванием цвета для практики манипуляции с DOM. У меня есть генератор случайных чисел, который дает мне значения для красного, зеленого и синего от 0 до 255, а затем назначает их переменной с именем randomColor со значением объединенной строки, которая содержит рандомизированные значения красного, зеленого и синего цветов.

Проблема, которую я не могу решить, состоит в том, почему назначение переменной randomColor в качестве свойства backgroundColor для квадрата в HTML не вступает в силу. Консоль не регистрирует никаких ошибок, но если я console.log квадратов backgroundColor, это всегда пустая строка. Как переназначить backgroundColor квадратов строке RGB, содержащейся в randomColor? 

var squares = document.querySelectorAll(".square");

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

for (var i=0; i<squares.length; i++) {
    let red = getRandomInt(256);
    let green = getRandomInt(256);
    let blue = getRandomInt(256);
    let randomColor = "rgb("+red+", "+green+", "+blue+");";
    squares[i].style.backgroundColor = randomColor;
}
html {
    box-sizing: border-box;
}

body {
    background-color: #222222;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 2% 0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.top {
    background-color: white;
    margin-top: 0;
    padding-top: 0;
}

.stripe {
    padding: 0;
    background-color: steelblue;
    color: white;
}

.stripe p {
    margin: 0 auto;
    padding-top: 3%;
}

.square {
    display: inline-block;
    width: 30%;
    padding-bottom: 33%;
    margin: 2px;
    border-radius: 5%;
    background-color: magenta;
}

.heading {
    font-size: 2em;
    margin-top: 0;
    padding: 2% 0;
}

.text-center {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>The Great RGB Guessing Game</title>
    <link rel="stylesheet" href="syles.css" type="text/css" />
  </head>
  <body>
    <div class="top">
      <h1 class="heading text-center">The Great<br><span>Color</span><br>Guessing Game</h1>
      <div class="stripe">
        <div class="container">
          <h2>Reset</h2>
          <p>Try again</p>
          <h2><span>Easy</span> | <span>Hard</span></h2>
        </div><!-- /.container -->
      </div><!-- /.stripe -->
    </div>
    <div class="container">
      <div class="square" id="square1"></div>
      <div class="square" id="square2"></div>
      <div class="square" id="square3"></div>
      <div class="square" id="square4"></div>
      <div class="square" id="square5"></div>
      <div class="square" id="square6"></div>
    </div>
    <script type="text/javascript" src="color-game.js"></script>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 01 ноября 2018

Вы просто должны удалить лишние ";" от тебя javascript 

randomColor = "rgb("+red+", "+green+", "+blue+")";
0 голосов
/ 01 ноября 2018

Попробуйте удалить внутреннюю точку с запятой из: 

let randomColor = "rgb("+red+", "+green+", "+blue+");";

Я полагаю, что это портит ваши результаты. 

let randomColor = "rgb("+red+", "+green+", "+blue+")";

Вышеуказанное работает для меня просто отлично! Выглядит хорошо.

0 голосов
/ 01 ноября 2018

Проблема - точка с запятой (;) в конце значения backgroundColor.

Итак, вместо "rgb("+red+", "+green+", "+blue+");" используйте "rgb("+red+", "+green+", "+blue+")"

Если вы удалите это, JS должен работать правильно. 

var squares = document.querySelectorAll(".square");

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

for (var i=0; i<squares.length; i++) {
    let red = getRandomInt(256);
    let green = getRandomInt(256);
    let blue = getRandomInt(256);
    let randomColor = "rgb("+red+", "+green+", "+blue+")";
    squares[i].style.backgroundColor = randomColor;
}
html {
    box-sizing: border-box;
}

body {
    background-color: #222222;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 2% 0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.top {
    background-color: white;
    margin-top: 0;
    padding-top: 0;
}

.stripe {
    padding: 0;
    background-color: steelblue;
    color: white;
}

.stripe p {
    margin: 0 auto;
    padding-top: 3%;
}

.square {
    display: inline-block;
    width: 30%;
    padding-bottom: 33%;
    margin: 2px;
    border-radius: 5%;
    background-color: magenta;
}

.heading {
    font-size: 2em;
    margin-top: 0;
    padding: 2% 0;
}

.text-center {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>The Great RGB Guessing Game</title>
    <link rel="stylesheet" href="syles.css" type="text/css" />
  </head>
  <body>
    <div class="top">
      <h1 class="heading text-center">The Great<br><span>Color</span><br>Guessing Game</h1>
      <div class="stripe">
        <div class="container">
          <h2>Reset</h2>
          <p>Try again</p>
          <h2><span>Easy</span> | <span>Hard</span></h2>
        </div><!-- /.container -->
      </div><!-- /.stripe -->
    </div>
    <div class="container">
      <div class="square" id="square1"></div>
      <div class="square" id="square2"></div>
      <div class="square" id="square3"></div>
      <div class="square" id="square4"></div>
      <div class="square" id="square5"></div>
      <div class="square" id="square6"></div>
    </div>
    <script type="text/javascript" src="color-game.js"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...