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

Calling javascript variable inside CSS using ${variable } not working

  • February 4, 2022
  • 3 replies
  • 350 views
G
Forum|alt.badge.img+1

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.

3 replies

G
Forum|alt.badge.img+1
  • garrieta
  • Author
  • February 4, 2022

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

G
Forum|alt.badge.img+1
  • garrieta
  • Author
  • February 4, 2022

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;
 }

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • February 5, 2022

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.

Terms & ConditionsAccessibility statement