JavaScript JavaScript and the DOM Traversing the DOM Getting the First and Last Child

Ben Hobgood
Ben Hobgood
1,791 Points

My solution for javascript list (disabling functionality buttons)

My Solution: https://w.trhou.se/olqht3o4o9

I personally didn't like the idea of a visual jump of buttons being added and created. I felt like it would give me a head ache to watch the buttons jump around. Additionally it would be a bad user experience if Up could be positioned where Down usually is. So instead I opted to 'gray out' and disable the buttons at the top and the bottom of the list.

Change Log from Original Script:

  1. Refactored repeated code in Button creation to be an arrow function.
  2. Created two functions to handle disabling & activating buttons.
  3. Created a function to crawl through the list and then adds buttons if they need to be added and updates the buttons to reflect the list item's position ( could be optimized further for performance).
  4. Created a function to create new list items
  5. Created a new event listener that adds a list item on hitting the 'return' key within the input field.
  6. Added crawl function to events to initialization of script & any listeners that affected order (addition / movement / subtraction)

1 Answer

Steven Parker
Steven Parker
171,041 Points

Nice enhancements! :+1: I also found that simply disabling the buttons created a more pleasant UX.

A couple of minor things I spotted in the code:

  • you don't need to use explicit css changes when you disable unless you don't like the default "dimmed" look
  • I don't think "cssText" (line 26) is actually a "style" property :point_left: turns out it is!
Ben Hobgood
Ben Hobgood
1,791 Points

Hey Steven. Thanks for the feedback. I was applying the style changes for visual reasons and cssText was used to wipe out the inline stylings I was using by setting the style attribute to blank. I wasn't sure of a better way to reset the button other then using class names to toggle between styles.

Steven Parker
Steven Parker
171,041 Points

You taught me something new! I was not previously aware of the properties of a CSSStyleDeclaration other than the style properties themselves.

And my comment about the default disabled appearance doesn't apply since these buttons are not using the default appearance.