Snake game. Does not update the coordinate value. Js

 let field = 0; let direction = "right"; function createField() { field = document.createElement('div'); document.body.appendChild(field); field.classList.add("field"); for (let i = 0; i < 100; i++) { let excel = document.createElement('div'); field.appendChild(excel); excel.classList.add("excel"); } return (field); } createField(); let excelList = field.children; let x = 0; let y = 10; for (let i = 0; i < excelList.length; i++) { x++; excelList[i].setAttribute("data-X", x); excelList[i].setAttribute("data-Y", y); if (x > 10) { x = 1; y--; excelList[i].setAttribute("data-X", x); excelList[i].setAttribute("data-Y", y); } } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } let snake = []; let randX = getRandomInt(4, 9); let randY = getRandomInt(4, 9); let elemThree = document.querySelector('[data-X="' + (randX - 3) + '"][data-Y="' + randY + '"]'); snake.unshift(document.querySelector('[data-X="' + randX + '"][data-Y="' + randY + '"]')); snake.push(document.querySelector('[data-X="' + (randX - 1) + '"][data-Y="' + randY + '"]')); snake.push(document.querySelector('[data-X="' + (randX - 2) + '"][data-Y="' + randY + '"]')); snake.push(elemThree); for (let i = 0; i < snake.length; i++) { snake[i].classList.add("snake_body"); snake[0].classList.add("snake_head"); snake[0].classList.remove("snake_body"); } let snakeCoordinates = [snake[0].getAttribute("data-X")]; console.log("snakeCoordinatea=" + snakeCoordinates); function move() { snake[0].classList.remove("snake_head"); snake[0].classList.add("snake_body"); let b = snake.length - 1; snake[b].classList.remove("snake_body"); snake.pop(); if (direction == "right") { let a = +snake[0].getAttribute("data-X"); if (a < 10) { a++; snake.unshift(document.querySelector('[data-X="' + a + '"][data-Y="' + randY + '"]')); } else { a = 1; snake.unshift(document.querySelector('[data-X="' + a + '"][data-Y="' + randY + '"]')); } randX = a; snake[0].classList.add("snake_head"); } else if (direction == "left") { let a = +snake[0].getAttribute("data-X"); if (a > 1) { a--; snake.unshift(document.querySelector('[data-X="' + a + '"][data-Y="' + randY + '"]')); } else { a = 10; snake.unshift(document.querySelector('[data-X="' + a + '"][data-Y="' + randY + '"]')); } randX = a; snake[0].classList.add("snake_head"); } else if (direction == "up") { let a = +snake[0].getAttribute("data-Y"); if (a < 10) { a++; snake.unshift(document.querySelector('[data-X="' + randX + '"][data-Y="' + a + '"]')); } else { a = 1; snake.unshift(document.querySelector('[data-X="' + randX + '"][data-Y="' + a + '"]')); } randY = a; snake[0].classList.add("snake_head"); } else if (direction == "down") { let a = +snake[0].getAttribute("data-Y"); if (a > 1) { a--; snake.unshift(document.querySelector('[data-X="' + randX + '"][data-Y="' + a + '"]')); } else { a = 10; snake.unshift(document.querySelector('[data-X="' + randX + '"][data-Y="' + a + '"]')); } randY = a; snake[0].classList.add("snake_head"); } } let interval = setInterval(move, 1000); window.addEventListener("keydown", function(event) { if (event.keyCode == 38 && direction != "down") { direction = "up"; } else if (event.keyCode == 39 && direction != "left") { direction = "right"; } else if (event.keyCode == 40 && direction != "up") { direction = "down"; } else if (event.keyCode == 37 && direction != "right") { direction = "left"; } console.log("snakeCoordinates=" + snakeCoordinates); }); 

 .field { margin-top: 100px; margin-left: 100px; display: flex; flex-wrap: wrap; width: 1000px; height: 1000px; outline: 1px solid green; } .excel { width: 98px; height: 98px; border:1px solid black; } .snake_head { background-image: url("img/snake.svg"); } .snake_body { background-color: forestgreen; border-radius: 80px; }