Jquery.css через цикл не работает, уже долго пытаюсь исправить, но ничего не выходит, подскажите решение?
Оснвоная проблема в том что если поменять i на любое число в диапазоне 1-12 то всё заработает, но если это делает цикл, то ничего не работает, я пытался конвертировать данные в строку и в число но ничего, также я пробовал не пользоваться Jquery но писало ошибку, прошу помочь
var div = document.createElement('div'); // Создание основного блока
div.id = 'block';
function getRandomInt(max) { // Функция которая создает случайное число
return Math.floor(Math.random() * max);
}
for (let i = 1; i < 13; i++) {
let chance = getRandomInt(101);
var pages = document.createElement('div'); //Создание блоков
pages.id = 'page'+i;
pages.innerHTML += i;
if (chance > 0 && chance < 53) {
console.log('grey', '#page'+i)
$('#page'+i).css('background','grey'); // если написать $('#page1')... то всё прекрасно работает, но если 1 в i то ничего не работает
}else if (chance > 53 && chance < 100){
console.log('blue', '#page'+i)
$('#page'+i).css('background','blue');
}
document.body.appendChild(div).appendChild(pages); // Добавление всех блоков в основной блок
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
</body>
<script src="script.js"></script>
<link href="GenerationStyle.css" rel="stylesheet" type="text/css">
</html>
#block {
position: absolute;
width: 900px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#block div {
display: inline-block;
background: green;
position: relative;
margin: 5px;
width: 140px;
height: 140px;
}
Источник: Stack Overflow на русском