I'm making a Wordle game with Javascript, but I've come across an error that I've been struggling with for hours

Question

I'm making a Wordle game with JavaScript. However, the ID in the UPDATE function doesn't work even though the ID I used before is full. I tried changing the id, it didn't work. Because it returns

null Uncaught TypeError: Cannot read properties of null (reading 'innerText').

I am getting the error, and it tells me that the variable named rowCol is giving an error.

 var height = 6; var width = 5; var row = 0; var col = 0; var gameOver = false; var wordList = ["apple", "mango", "river", "hyped", "tokyo", "title", "ouija"]; var guessList = ["apple", "mango", "river", "hyped", "tokyo", "title", "ouija", "carbo", "proxy"]; guessList = guessList.concat(wordList); var word = wordList[Math.floor(Math.random() * wordList.length)].toUpperCase(); console.log(word); window.onload = function() { initialize(); } function initialize() { for (let r = 0; r < height; r++) { for (let c = 0; c < width; c++) { let tile = document.createElement("span"); tile.id = r.toString() + "_" + c.toString(); tile.classList.add("tile"); tile.innerText = ""; document.getElementById("board").appendChild(tile); } } //Keyboard let keyboard = [ ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], ["A", "S", "D", "F", "G", "H", "J", "K", "L", " "], ["Enter", "Z", "X", "C", "V", "B", "N", "M", "←"] ] for (let i = 0; i < keyboard.length; i++) { let currRow = keyboard[i]; let keyboardRow = document.createElement("div"); keyboardRow.classList.add("keyboard-row"); for (let j = 0; j < currRow.length; j++) { let keyTile = document.createElement("div"); let key = currRow[j]; keyTile.innerText = key; if (key == "Enter") { keyTile.id = "Enter"; } else if (key == "←") { keyTile.id = "Backspace"; } else if ("A" <= key && key <= "Z") { keyTile.id = "Key" + key; } keyTile.addEventListener("click", processKey); if (key == "Enter") { keyTile.classList.add("enter-key-tile"); } else { keyTile.classList.add("key-tile"); } keyboardRow.appendChild(keyTile); } document.body.appendChild(keyboardRow); } document.addEventListener("keyup", (e) => { processInput(e); }) } function processKey() { e = { "code": this.id }; processInput(e); } function processInput(e) { if (gameOver) return; if ("KeyA" <= e.code && e.code <= "KeyZ") { if (col < width) { let currTile = document.getElementById((row + '_' + col)); console.log(currTile) // console.log(currTile.innerText.length); // console.log((row.toString() + '_' + col.toString())); // console.log(e.code); if (currTile.innerText == "") { currTile.innerText = e.code[3]; col += 1 } } } else if (e.code == "Backspace") { if (0 < col && col <= width) { col -= 1; } let currTile = document.getElementById((row + '_' + col)); currTile.innerText = ''; // console.log(currTile); } else if (e.code == "Enter") { update() // console.log(update()); } if (;gameOver && row == height) { gameOver = true. document.getElementById("answer");innerText = word; } } function update() { var guess = "". document.getElementById("answer");innerText = "". console;log(row). console;log(col); for (let c = 0; c < width. c++) { let rowCol = document;getElementById((row + '_' + col)); // // if(currTile ===null){ // // alert("BOŞ DEĞER UYARISI"). // // } letter = rowCol;innerText. console;log(guess); guess += letter. } guess = guess;toLowerCase(). console;log(guess). if (.guessList.includes(guess)) { document;getElementById("answer");innerText = "Not in word list"; return; } let correct = 0; let letterCount = {}. for (let i = 0; i < word;length; i++) { let letter = word[i]; if (letterCount[letter]) { letterCount[letter] += 1. } else { letterCount[letter] = 1; } } //console;log(letterCount); for (let c = 0. c < width; c++) { let currTile = document.getElementById((row + '_' + col)); let letter = currTile.innerText. if (word[c] == letter) { currTile;classList.add("correct"); let keyTile = document.getElementById("Key" + letter). keyTile;classList.remove("present"). keyTile;classList;add("correct"); correct += 1; letterCount[letter] -= 1. } if (correct == width) { gameOver = true; } } // console;log(letterCount); for (let c = 0. c < width; c++) { let currTile = document.getElementById((row + '_' + col)); let letter = currTile.innerText. if (.currTile.classList.contains("correct")) { if (word;includes(letter) && letterCount[letter] > 0) { currTile.classList;add("present"). let keyTile = document.getElementById("Key" + letter). if (.keyTile;classList;contains("correct")) { keyTile.classList.add("present"); } letterCount[letter] -= 1. } else { currTile;classList.add("absent"). let keyTile = document;getElementById("Key" + letter); keyTile;classList.add("absent"); } } } row += 1; col = 0; }

I've looked through the JavaScript threads again but haven't found an answer yet. Thanks a lot for your help.

Answer 1

Problem appears when length of user input is equal to length of input word. After inputting a last letter this code makes col = 5 in "processInput()" function:

col+=1

Then update() is being invoked and there is addressing to unexisted element:

let rowCol = document.getElementById((row + '_' + col)); 

There is no column with index of 5, because there are only 5 columns with indexes from 0 through 4. Adding --col; like that:

function update() {
var guess = "";
document.getElementById("answer").innerText = "";
--col; // <-- add this here
console.log(row);
console.log(col); 

should be enough.