Can't understand why this is showing as undefined

Question

I'm starting to build a simple text adventure game, and can't figure this issue out at all. I type 'inspect table' into the text box. Inspect is stripped out, leaving only table, which is then passed to the inspect function. When I try to change innerHTML to input.description I get undefined. Yet when I use table.description it works fine.

const text = document.querySelector('#text');
const userForm = document.querySelector('#user-form');
let userInput = document.querySelector('#user-input');

const table = {
  description: 'Plates and silverware are on the table',
  items: ['plates', 'silverware'],
  itemDescrips: ['rotting food sits on the plates.', 'just silverware']
};  

let inspect = function(input) {
  //Returns undefined
  text.innerHTML = input.description;

  //Oddly, this works fine
  //text.innerHTML = table.description
};

userInput.addEventListener('keydown', (e) => {
 
  if (e.keyCode == 13) {
    let command = userInput.value.split(' ');
    if (command.includes('inspect')) {
      //I've checked the type of this argument and it is a string.
      inspect(command[1]);
    }
    userForm.reset();**strong text**
    e.preventDefault();
  } 

});

Did you mean to do `userInput.description`, You haven't actually defined the value for `input` at any point in your code. Maybe you missed some code, or maybe this is your problem. — Jonah C Rowlinson, Mar 29 '21 at 19:53
I had to strip 'inspect' out of 'inspect table' in the event listener, which is why I couldn't use userInput by itself. When I checked the type of the argument (command[1]) in the call to inspect, it was indeed a string and only showed 'table'. I simply used 'input' as the parameter name for the inspect function. I thought that would be fine? — sqerl, Mar 29 '21 at 20:11

score 1 · Answer 1 · answered Mar 29 '21 at 20:17

1

You guys got me thinking, and helped me realize i could use conditional logic in the inspect function to make this work.

let inspect = function(input) {
 if (input == 'table') {
   text.innerHTML = table.description;
 }
};

answered Mar 29 '21 at 20:17

sqerl

11
2

score 0 · Answer 2 · answered Mar 29 '21 at 20:11

You're passing a simple text to your inspect function and this text doesn't have a property called description. That's why you're getting an undefined return.

Assiging just the parameter input to your text.innerHTML works fine.

let inspect = function(input) {
  text.innerHTML = input;
};

Can't understand why this is showing as undefined

2 Answers2