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.
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.