For one of my surveys, I have a block with 19 sliders, each in its own question of that block. For all intents and purposes, other than some descriptive text, each slider is identical to every other slider on that block, and I have the same jQuery and Javascript code on all of them. Essentially, the code works to prevent respondents from sliding on the slider past the value 50, even though the max value on the slider itself is 100.
They all work fine and dandy, but I have one last slider on a different block of the survey that shows up _after_ the block with this first batch of sliders. For this one, respondents are allowed to slide anywhere from 0 to 100 (the min and max values of the slider). Otherwise, they all have the same code to hide the handle on the slider until the respondent has clicked on the track of the slider.
I've noticed though that sometimes, when I'm testing out my survey, I can't slide past 50 on that last slider (so it seems to be using the same Javascript code as all the earlier sliders, which is incorrect), and other times it works totally fine (i.e. I can slide anywhere on the slider).
Does anyone know why jQuery and Javascript code could possibly be spilling over across questions and even across blocks like that? I thought maybe it had to do with the fact that I have so many identical sliders all using the same code, but as I understand it, each page should add/ execute whatever Javascript or jQuery is on it once it's loaded/ready, and presumably stop whenever the page is unloaded. Is that not how it works? See below the code I have for the first batch of sliders. For the very last slider, I of course get rid of the "else" and just print to the page whatever values of the sliders I have, so it's very similar. For the last slider, I tried renaming variables, even adding extra conditions that basically all execute the same thing, and nothing seems to consistently fix the problem. Any help?
`var q = jQuery("#"+this.questionId);
var result=0;
var otherend=0;
var firstclick=0;
q.find(".handle").hide();
q.find(".track").on("click", function() {
q.find(".handle").show();
firstclick=firstclick+1;
});
jQuery("body").mouseup(function () {
if (firstclick>0) {
result = jQuery(".ResultsInput").val();
if(result<=50) {
otherend = 100 - result;
jQuery(".result").html(result);
jQuery(".otherend").html(otherend);
} else {
jQuery(".ResultsInput").val(50);
jQuery(".result").html(50);
jQuery(".otherend").html(50);
}
};
});
jQuery("body").mousemove(function () {
if (firstclick <= 0) {
jQuery(".result").html(0);
jQuery(".otherend").html(0);
} else if (firstclick>0) {
result = jQuery(".ResultsInput").val();
otherend = 100 - result;
jQuery(".result").html(result);
jQuery(".otherend").html(otherend);
};
});`
It is because you attached event listeners to the "body". Try changing it to ".Skin".
Thanks so much
@TomG! As usual, worked perfectly.
