Calling javascript variable inside CSS using ${variable } not working | XM Community
Skip to main content

Hi all,
I am going crazy with this so your help will be enormously appreciated.
I have this javascript function:
 function fillColor(){
   percent1 = (sliderOne.value / sliderMaxValue) * 100;
   percent2 = (sliderTwo.value / sliderMaxValue) * 100;
   sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% ${percent2}%, #dadae5 ${percent2}%)`;
for some reason the ${percent1} and ${percent2} calls don't work. Everything is fine when I substitute that for actual nubmers though.
What drives me insane is that it works we all when previewing the question, but not when previewing the survey/block! Is ther something about how qualtrics reads the javascript with the ${} language? I have barely any other code in the survey that could be interacting with this, so don't think that's what's gonig on.

Thanks in advance. So much.

I think ${} might be interfering with the piped text language, so it is not properly read? Please help.

I solved it using this:
 function fillColor(){
   percent1 = (sliderOne.value / sliderMaxValue) * 100;
   percent2 = (sliderTwo.value / sliderMaxValue) * 100;
colores = `linear-gradient(to right, #ADD8E6 ` + percent1 + `%, #3264fe ` + percent1 + `%, #3264fe ` + percent2 + `%, #DC143C ` + percent2 + `%)`;
   sliderTrack.style.background = colores;
 }

Yes, ${} specifies piped text in Qualtrics. Piped text is resolved on the server before the page is sent to the browser. ${percent1} will resolved as empty ("") since it isn't a valid piped field.

Leave a Reply


Terms & Conditions