Как найти и исправить ошибку типа неопределенного свойства

Question

Я следую учебному пособию по кроссворду, но после запуска функции selectLetter() нажатием клавиши я получаю это сообщение при запуске в chrome:

"UncaughtОшибка типа: невозможно прочитать свойство 'clueA' из неопределенного "*

, и это сообщение при запуске в Firefox Developer:

" Ошибка типа: currentLetter.dataset не определена ". *

Я пытался использовать typeof в console.log для отслеживания значений currentLetter и currentLetter.dataset, но это только смутило меня больше.

var allLetters;
var currentLetter;
var wordLetters;
var acrossClue;
var downClue;
var typeDirection = "right";
window.onload = init;

function init() {
  allLetters = document.querySelectorAll("table#crossword span");
  currentLetter = allLetters[0];
  var acrossID = currentLetter.dataset.clueA;
  var downID = currentLetter.dataset.clueD;
  acrossClue = document.getElementById(acrossID);
  downClue = document.getElementById(downID);
  formatPuzzle(currentLetter);
  for (var i = 0; i < allLetters.length; i++) {
    allLetters[i].style.cursor = "pointer";
    allLetters[i].onmousedown = function(e) {
      formatPuzzle(e.target);
    }
  }
  document.onkeydown = selectLetter;
  console.log("----init function----\n" + "Current Letter Type: " + typeof currentLetter + " \ncurrentLetter.dataset Type: " + typeof currentLetter.dataset);
}


function formatPuzzle(puzzleLetter) {
  currentLetter = puzzleLetter;
  for (var i = 0; i < allLetters.length; i++) {
    allLetters[i].style.backgroundColor = "";
  }
  acrossClue.style.color = "";
  downClue.style.color = "";

  if (currentLetter.dataset.clueA !== undefined) {
    acrossClue = document.getElementById(currentLetter.dataset.clueA);
    acrossClue.style.color = "blue";
    wordLetters = document.querySelectorAll("[data-clue-a=" + currentLetter.dataset.clueA + "]");
    for (i = 0; i < wordLetters.length; i++) {
      wordLetters[i].style.backgroundColor = "rgb(231,231,255)";
    }
  }
  if (currentLetter.dataset.clueD !== undefined) {
    downClue = document.getElementById(currentLetter.dataset.clueD);
    downClue.style.color = "red";
    wordLetters = document.querySelectorAll("[data-clue-d=" + currentLetter.dataset.clueD + "]");
    for (i = 0; i < wordLetters.length; i++) {
      wordLetters[i].style.backgroundColor = "rgb(255,231,231)";
    }
  }
  if (typeDirection === "right") {
    currentLetter.style.backgroundColor = "rgb(191,191,255)";
  } else {
    currentLetter.style.backgroundColor = "rgb(255,191,191)";
  }
  console.log("----formatPuzzle function----\n" + "Current Letter Type: " + typeof currentLetter + " \ncurrentLetter.dataset Type: " + typeof currentLetter.dataset);
}


function selectLetter(e) {
  var leftLetter = currentLetter.dataset.left;
  var upLetter = currentLetter.dataset.up;
  var rightLetter = currentLetter.dataset.right;
  var downLetter = currentLetter.dataset.down;
  var userKey = e.keyCode;
  console.log("----selectLetter function----\n" + "Current Letter Type: " + typeof currentLetter + " \ncurrentLetter.dataset Type: " + typeof currentLetter.dataset + "\n.dataset.up:" + currentLetter.dataset.up + "\nkeycode:" + userKey);
  if (userKey === 37) {
    formatPuzzle(leftLetter);
  } else if (userKey === 38) {
    formatPuzzle(upLetter);
  } else if (userKey === 39) {
    formatPuzzle(rightLetter);
  } else if ((userKey === 40) || (userKey === 13)) {
    formatPuzzle(downLetter);
  } else if ((userKey === 8) || (userKey === 46)) {
    currentLetter.textContent = "";
  } else if (userKey === 32) {
    switchTypeDirection;
  } else if (65 <= userKey <= 90) {
    currentLetter.textContent = getChar(userKey);
    if (typeDirection === "right") {
      formatPuzzle(rightLetter);
    } else {
      formatPuzzle(downLetter);
    }
  }
  e.preventDefault();
}

function switchTypeDirection() {

}

function getChar(keyNum) {
  return String.fromCharCode(keyNum);
}

<table id="crossword">
  <caption>Today's Crossword</caption>
  <tr>
    <td><span id="c1_1" data-letter="C" data-right="c1_2" data-left="c1_8" data-down="c2_1" data-up="c11_1" data-clue-a="a1" data-clue-d="d1"></span><sup>1</sup></td>
    <td><span id="c1_2" data-letter="A" data-right="c1_3" data-left="c1_1" data-down="c2_2" data-up="c11_2" data-clue-a="a1" data-clue-d="d2"></span><sup>2</sup></td>
    <td><span id="c1_3" data-letter="M" data-right="c1_4" data-left="c1_2" data-down="c2_3" data-up="c11_3" data-clue-a="a1" data-clue-d="d3"></span><sup>3</sup></td>
    <td><span id="c1_4" data-letter="O" data-right="c1_5" data-left="c1_3" data-down="c2_4" data-up="c10_4" data-clue-a="a1" data-clue-d="d4"></span><sup>4</sup></td>
    <td><span id="c1_5" data-letter="M" data-right="c1_6" data-left="c1_4" data-down="c2_5" data-up="c11_5" data-clue-a="a1" data-clue-d="d5"></span><sup>5</sup></td>
    <td><span id="c1_6" data-letter="I" data-right="c1_7" data-left="c1_5" data-down="c2_6" data-up="c11_6" data-clue-a="a1" data-clue-d="d6"></span><sup>6</sup></td>
    <td><span id="c1_7" data-letter="L" data-right="c1_8" data-left="c1_6" data-down="c2_7" data-up="c11_7" data-clue-a="a1" data-clue-d="d7"></span><sup>7</sup></td>
    <td><span id="c1_8" data-letter="E" data-right="c1_1" data-left="c1_7" data-down="c2_8" data-up="c11_8" data-clue-a="a1" data-clue-d="d8"></span><sup>8</sup></td>
    <td class="blank"></td>
  </tr>

Я ожидаю, что клавиши со стрелками изменят цвет фона rgb (191,191,255) ячейки, на которую указывает стрелка в головоломке, но код перестает работать иошибка типа выводится на консоль.

Answer 1

Ошибка подразумевает, что currentLetter назначено значение, которое не является элементом DOM (поскольку каждый элемент DOM имеет свойство dataset).

Единственные места, которые вы назначаете для currentLetter, находятся в init:

currentLetter = allLetters[0];

и formatPuzzle:

currentLetter = puzzleLetter;

allLetters[0] будет элементом DOM.

puzzleLetter является параметром formatPuzzle, поэтому давайте посмотрим, вызывается ли функция и передается ли что-то, что является не элементом DOM.

В selectLetter вы вызываете formatPuzzle несколько раз с разными аргументами, но ни один из них не является элементом DOM. Например. leftLetter - это значение currentLetter.dataset.left.

Может быть, вы хотели сделать

var leftLetter = documnent.getElementById(currentLetter.dataset.left);
// etc

---

Убедитесь, что вы передаете в функцию только элементы DOM, и по возможности избегайте глобальных переменных.