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);
};
});`
Best answer by TomG
View original