Seleção de tags no javascript

Olá, estou tentando selecionar determinadas classes com o uso de querySelectorAll, mas não está preenchendo a variável:

A importação no html está assim:

<script language="javascript" src="javascript/block/card.js"></script>

O arquivo card.js com o seguinte código:

var $cardColors = document.querySelectorAll(".card-colors");
console.log($cardColors);

Apresenta o seguinte resultado no console:

NodeList [  ] 
$cardColors
NodeList [  ]
$cardColors[0]
undefined

Se eu usar outro seletor, como o getElementsByClassName o resultado é este:

HTMLCollection [  ] 
$cardColors
HTMLCollection [  ]
$cardColors[0]
undefined

Porém, se eu fizer manualmente no console, o resultado é este (vou usar os dois seletores e não haverá código no arquivo card.js):

var abc = document.querySelectorAll('.card-colors')
undefined
abc
NodeList [ <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, 6 mais… ]

var cba = document.getElementsByClassName('card-colors')
undefined
cba
HTMLCollection [ <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, <li.card-colors>, 6 mais… ]

Alguém, por favor, pode me ajudar? Não vejo erro de escrita, nem de importação do arquivo. Já testei a importação com uma mensagem qualquer no console.