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.