Search code examples
javascriptjqueryjquery-uislideruislider

Accessing javascript property yields different result when being accessed directly than when reading object in dev tools

I'm trying to debug the popular "cannot call method 'addClass' of undefined" of jQuery slider in range mode, and finding some strange things. Some people say this error is due to values being passed in as strings instead of integers, but my values are verified integers and I'm out of ideas, so I went to try and debug jQuery UI, hitting a dead end instantly.

See image: enter image description here

As you can see, when I expand the options object in the dev tools, options.values is an array of two NaNs. However, if I console.log(options.values) I get the real array, as it should be, with proper numeric values. What's worse, when I log them directly with console.log(options.values[0]) for example, I get the proper value.

However, when slider requests the values, it always gets NaN back - this is apparent when calculating the closestHandle for the range slider - the NaN is so toxic it poisons the entire loop and returns an undefined closestHandle, thus causing the aforementioned "addClass" error.

Why does the situation from the image happen? Why can it happen? Apparently two identical properties contain different values depending on the way of accessing them.

Solution

  • The Chrome console is a bit tricky. The state of the Object you see in does not necessarily reflect the state at the time it was logged. It can be an 'updated' view.

    While this does not solve your main problem it's obvious that logging an object doesn't help you much with debugging on Chrome in many situations. A breakpoint would be a better choice.

    That said, somewhere in your code the object seems to be changed.