I am a beginner and I am learning JavaScript now. I am trying to make a javascript game. On this project, I am trying to add a style through javascript. On my project, there is a div named “Chick”. When user press any key the row and column will change for the chick. But the style is not working. The style is not added when I press key.
const chick = document.querySelector('.chick');
let chickRow = 17;
let chickCol = 10;
document.addEventListener('keydown', (e) => {
if ((e.key === "ArrowUp") && (chickRow > 0)) {
chickRow -= 1;
}
if ((e.key === "ArrowDown") && (chickRow < rows)) {
chickRow += 1;
}
if ((e.key === "ArrowLeft") && (chickCol > 0)) {
chickCol -= 1;
}
if ((e.key === "ArrowRight") && (chickCol < columns)) {
chickCol += 1;
}
chick.style.gridArea= `${chickRow} / ${chickCol}`;
});