Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Refactor 2: Readable Branching Logic

ANOTHER Uncaught TypeError: nameActions[action] is not a function

Hi,

I have read each discussion thread regarding the TypeError referenced in my headline. I have checked for typos, consistent casing, consistent declarations, etc. and am still getting this message.

To clarify: the app is actually working as normal. EVERYTHING WORKS except for the fact that I get this message when (a) I click INSIDE THE TEXT BOX after selecting "edit" and (b) when I click "confirmed" or around the box.

Can anyone see what's going wrong here?

Thank you, thank you!

ul.addEventListener('click', (e) => {

const button = e.target;
const li = button.parentNode;
const ul = li.parentNode;
const action = button.textContent;
const nameActions = {
 remove:  () => {
  ul.removeChild(li);
}, 

 edit: () => {
  const span = li.firstElementChild;
  const input = document.createElement('input');
  input.type = 'text';
  input.value = span.textContent;
  li.insertBefore(input, span);
  li.removeChild(span);
  button.textContent = 'save';
}, 

 save: () => {
  const input = li.firstElementChild;
  const span = document.createElement('span');
  span.textContent = input.value;
  li.insertBefore(span, input);
  li.removeChild(input);
  button.textContent = 'edit';
}         

}; nameActionsaction; });

2 Answers

So I'll point you in the right direction and say add in a

console.log(action);

right after you declared your action variable. Then go ahead and play around with the the input to update a name and the confirmed checkbox. and see what gets logged to the console.

Keep in mind with the code you have provided your event listener is listening for ANY clicks within the ul element and it will run your code.

Since your nameActions object has 3 methods in it save, remove, and edit if your action variable is anything else other than those 3 then you'll get an Uncaught TypeError.

So this is where you might want to have a conditional that checks if what you are clicking is actually a button first before your code is ran similar to line 80 in the video.

Hope that helps. Keep up the great work and Happy Coding.

Thanks, Juan Lopez ! Very helpful!

Hi, I have the same error. I have exact code like Guill but its not working for me. I did console for action and it prints Edit when I click the Edit button. I cannot edit the name. I have this error:

app.js:119 Uncaught TypeError: nameActions[action] is not a function at HTMLUListElement.<anonymous> (app.js:119) (anonymous) @ app.js:119