![](/img/trans.png)
[英]How to fix Type Error cannot read property 'cityName' of undefined in the weather forecast project?
[英]How to find and fix a type error of undefined property
我正在學習有關填字游戲的教程,但是當我按下按鍵觸發selectLetter()
函數后,當我在chrome中運行該消息時,我會收到以下消息:
“未捕獲的TypeError:無法讀取未定義的屬性
'clueA'
” *
當我在firefox開發人員中運行該消息時:
“ TypeError:
currentLetter.dataset
未定義”。*
我嘗試在console.log中使用typeof來跟蹤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),但是代碼會停止運行,並且會在控制台上顯示類型錯誤。
該錯誤意味着為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元素傳遞給函數,並盡可能避免使用全局變量。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.