Почему нет связки id из HTML в JS?

Question

[Vladislav Pal]

Почему id="messageDisplay" не имеет доступа к message.textContent = "Try again, bro";?

// Array of colors
var colors = [
    'rgb(255, 0, 0)',
    'rgb(0, 255, 0)',
    'rgb(0, 0, 255)',
    'rgb(255, 255, 0)',
    'rgb(0, 255, 255)'
];

// Variables
var squares = document.querySelectorAll(".square");
var picked = colors[3];
var display = document.getElementById("rgb");
var message = document.querySelector("#messageDisplay");

display.textContent = picked;

// Cycle for color
for(var i = 0; i < squares.length; i++){
    squares[i].style.background = colors[i];
    // add events
    squares[i].addEventListener("click",function(){
        var clicked = this.style.background;
        if(clicked === picked){
            message.textContent = "Correct!";
        }
        else{
            this.style.background = "#1d1c1c";
            message.textContent = "Try again, bro";
        }
    });
}

<div>
        <span id="messageDisplay"> </span>
 </div>

При неправильном выборе цвета должно было появляться сообщение из message, но они не связаны. В чём проблема?

Comments

[Дмитрий Беляев]

Вы уверены, что вызов querySelector для messageDisplay происходит после появления данного элемента в DOM?

[Vladislav Pal]

Дмитрий Беляев, все я разобрался, я случайно в HTML удалил id для display, из-за этого все пошло не так как надо, спасибо Вам.

Answer 1

[Pavstyuk]

var message = document.getElementById("messageDisplay");

А если так?

Comments

[Vladislav Pal]

я уже это пробовал, не подошло

Answer 2

[kocherman]

message.innerHTML="Try again, bro";