Type Error: undefined

I’m working on this bonus assignment in my class to create a crossword puzzle following the instruction given. I created the function as described in this step:

Create the selectLetter() function. The purpose of this function is to allow users to select puzzle cells using the keyboard. Add the following commands to the function:

  1. Declare the leftLetter , upLetter , rightLetter , and downLetter variables and set their values to reference the letters to the left, above, to the right, and below the current letter selected in the table. ( Hint : use the dataset.left, dataset.up, dataset.right, and dataset.down properties of currentLetter.)
  2. Explore Store the code of the key pressed by the user in the userKey variable. ( Hint : use the keyCode property of the event object to retrieve the key code value.)
  3. Add the following if-else structure to determine the program response based on the value of userKey:
  4. If userKey equals 37 (the left arrow key), call the formatPuzzle() function using leftLetter as the parameter value.
  5. If userKey equals 38 (the up arrow key), call formatPuzzle() with the upLetter variable.
  6. If userKey equals 39 or 9 (the right arrow and tab keys), call formatPuzzle() with the rightLetter variable.
  7. If userKey equals 40 or 13 (the down arrow and enter keys), call formatPuzzle() with the downLetter variable.
  8. If the userKey equals 8 or 46 (the backspace or delete keys), delete the text content of currentLetter.
  9. If userKey equals 32 (the spacebar key), run the switchTypeDirection() function to change the typing direction.
  10. If the code value is between 65 and 90 (the letters a through z), write the character into the cell by changing the text content of currentLetter to the value returned by the getChar() function using userKey as the parameter value and then move to the next cell in the puzzle. If typeDirection is “right”, move to the next cell by calling the formatPuzzle() function with the rightLetter variable; otherwise, go down to the next cell by calling the formatPuzzle() variable with the downLetter variable.
  11. After the if-else structure, enter a command to prevent the browser from performing the default action in response to the keyboard event.

… but when I try to run it the console give me a type error of undefined. I’m still fairly new to javascript so I’m not sure where I should even start in trying to solve this problem. I made a codepen with the javascript, css and html files https://codepen.io/cokopoof/project/editor/ZKgYNB
What am I doing wrong or does anyone have any tips on how I can figure it out?

Can you explain the exact steps to create the error in the console? When I load the page, it does not show any errors in the console.

It shows up when the selectLetter function is called which runs when a key is pressed on the keyboard.

I have typed letters all over the puzzle and hit all the arrow keys, but no error shows. You need to give an exact sequence to duplicate the error.

Sorry about that, first select a cell in the crossword and then press an arrow key or letter key. I just checked again and there should be an error that comes up that says:

TypeError: currentLetter.dataset is undefined

in the the firefox console. It might say it differently in a different browser though.

I finally got it working. I had to refresh for some reason. The problem is your function takes an argument and the value you are passing is a string like “c1_4”. You assign this value (puzzleLetter) to currentLetter, so currentLetter is a string equal to “c1_4” and strings do not have dataset properties by default. You need to make sure you are passing the dataset object to the function.

If you look at the following lines in that function, you are assigning leftLetter and the other variables strings.

    var leftLetter = currentLetter.dataset.left;
    var upLetter = currentLetter.dataset.up;
    var rightLetter = currentLetter.dataset.right;
    var downLetter = currentLetter.dataset.down;
1 Like

Yes, this is where I’m confused. The assignment actually said to assign the variable that way for some reason.

Declare the leftLetter , upLetter , rightLetter , and downLetter variables and set their values to reference the letters to the left, above, to the right, and below the current letter selected in the table. ( Hint : use the dataset.left, dataset.up, dataset.right, and dataset.down properties of currentLetter.)

Or maybe I’m reading it wrong. I did some research and tried changing the variable assignments to this:

var leftLetter = currentLetter.getAttributeNode("data-left");
var upLetter = currentLetter.getAttributeNode("data-up");
var rightLetter = currentLetter.getAttributeNode("data-right");
var downLetter = currentLetter.getAttributeNode("data-down"); 

in order to return an object instead of a string but it still doesn’t work; I’m guessing because it’s an attribute object and not a HTMLSpanElement object?

I’ve figured it out!

var leftLetter = document.getElementById(currentLetter.dataset.left);
var upLetter = document.getElementById(currentLetter.dataset.up);
var rightLetter = document.getElementById(currentLetter.dataset.right);
var downLetter = document.getElementById(currentLetter.dataset.down);

I looked at the html file again and realized that that string value of the data up, left, down and right were supposed to be used as the id since the id’s matched the cells that are in those directions in order for it to highlight that cell. Thank you for your help :grin::grin:

1 Like