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

slider on change check innerHTML

I am working with slider library (noUIslider). Everything works fine.. except one single thing! i am putting out the slider value in a span and when this changes i needs to fire an specific event. All the changes are visibly in the span but when i try reading it with javascript.. it doesn't work

This is my html

<div id="slider-step"></div>
<span id="slider-step-value"></span>

and this my javascript

var sliderValue = document.getElementById('slider-step-value').innerHTML;

stepSlider.noUiSlider.on('update', function() {
  console.log("change");
  if(sliderValue === "2004"){
    alert("hoi");
  }
});

What am i doing wrong!? thank you guys! :)

2 Answers

It looks like you only check/set the sliderValue variable when the script loads so it's value never updates. Check and set it it inside your on update callback function. Maybe something like this:

var slider = document.getElementById('slider-step-value');
var sliderValue;

stepSlider.noUiSlider.on('update', function() {
  console.log("change");
  // check the slider value in here
  sliderValue = slider.innerHTML;
  if(sliderValue === "2004"){
    alert("hoi");
  }
});

Thanks LaVaughn Haynes

That worked perfectly!