Мой код JS все еще продолжает говорить ничего (?) Вместо правильных цветов RGB, и не знаете почему? - PullRequest
Новая
       2

Мой код JS все еще продолжает говорить ничего (?) Вместо правильных цветов RGB, и не знаете почему?

0 голосов
/ 25 августа 2018

Что ж, я хочу сделать игру угадывания цветов rgb в JS (+ HTML, CSS) и в цикле for, следующая строка возвращает мне только пробел: 

console.log(this.style.background);

Вотполный код JS: 

var colors = document.querySelectorAll(".square");
var rgbColors = [
    "rgb(21,54,217)",
    "rgb(32,255,0)",
    "rgb(43,255,255)",
    "rgb(32,68,103)",
    "rgb(147,54,24)",
    "rgb(255,54,217)"
];
var pickedColor = rgbColors[3];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;

for (var i = 0; i < colors.length; i++) {
    colors[i].style.backgroundColor = rgbColors[i];
    colors[i].addEventListener("click", function() {
        console.log(this.style.background);
    })
}

А вот мой HTML, если это необходимо: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>RGB guessing game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>The Great <span id="colorDisplay">RGB</span> guessing game</h1>
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>

    <link rel="stylesheet" type="text/css" media="screen" href="rgbGame.css" />
    <script src="rgbGame.js"></script>
</body>
</html>

Я думаю, мой CSS не является источником проблемы.Надеюсь, ты сможешь мне помочь.Спасибо, Кристоф.

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Element.style.background не существует, и вы не установили его ни для какого элемента;используйте Element.style.backgroundColor. 

var colors = document.querySelectorAll(".square");
var rgbColors = [
    "rgb(21,54,217)",
    "rgb(32,255,0)",
    "rgb(43,255,255)",
    "rgb(32,68,103)",
    "rgb(147,54,24)",
    "rgb(255,54,217)"
];
var pickedColor = rgbColors[3];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;

for (var i = 0; i < colors.length; i++) {
    colors[i].style.backgroundColor = rgbColors[i];
    colors[i].addEventListener("click", function() {
        console.log(this.style.backgroundColor);
    })
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>RGB guessing game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>The Great <span id="colorDisplay">RGB</span> guessing game</h1>
    <div id="container">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
    </div>

    <link rel="stylesheet" type="text/css" media="screen" href="rgbGame.css" />
    <script src="rgbGame.js"></script>
</body>
</html>
0 голосов
/ 25 августа 2018

Так как background не было установлено, это будет пустая строка.

Используйте console.log(this.style);, чтобы показать все свойства стиля.Вы увидите, что background - пустая строка, а backgroundColor содержит строку, представляющую информацию о цвете, которую вы установили ранее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...