Я нажал на свои цветные кнопки изображений, но они не появляются в массиве в консоли

Question

Я использую Chrome Developer, чтобы проверить 4 цветных кнопки, которые я создал. Каждый раз, когда я нажимаю на кнопку, я должен создавать массив в консоли, но он не делает все. Мой синтаксис неверен?

var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];

$('.btn').click(function(){
  var userChosenColour = $(this).attr("id");
  userClickedPattern.push(userChosenColour);
});

function nextSequence(){
  var randomNumber = Math.floor(Math.random()* 4);
  var randomChosenColour = buttonColours[randomNumber];
  gamePattern.push(randomChosenColour);
}

Answer 1

Может случиться, что ваш скрипт вызывается до того, как браузер завершит построение DOM. В этом случае ваш скрипт не может найти никаких кнопок с классом «btn» в DOM. Вы должны вызвать свой скрипт после завершения построения DOM:
$(document).ready(function() { 'your code' });