我正在用 Javascript 制作 Wordle 游戏，但我遇到了一个错误，我已经为此苦苦挣扎了几个小时

Question

我正在用 JavaScript 制作文字游戏。但是，即使我之前使用的 ID 已满，UPDATE 函数中的 ID 也不起作用。我试过更改id，但没有用。因为它returns

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

我收到错误，它告诉我名为 rowCol 的变量出错。

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;
}

我再次查看了 JavaScript 个话题，但还没有找到答案。非常感谢您的帮助。

Answer 1

当用户输入的长度等于输入单词的长度时出现问题。输入最后一个字母后，此代码使“processInput()”函数中的 col = 5：

col+=1

然后调用 update() 并且寻址到不存在的元素：

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

没有索引为 5 的列，因为索引从 0 到 4 的列只有 5 个。像这样添加 --col;：

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

应该够了。

我正在用 Javascript 制作 Wordle 游戏，但我遇到了一个错误，我已经为此苦苦挣扎了几个小时

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

javascript

wordle-game