Javascript not working on iphone

I colour coded the NPS scale using Javascript.

It works as intended on desktop and android mobile devices but not for Iphone.

On Iphone, respondents can see the colour coded scale but cant select them. Please advice.

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
for (var i=1;i<=11;i++){

jQuery("td:eq("+i+")").find('label span').css("color", "#ffffff");

   }

   for (var i=1;i<=7;i++){

jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(255,0,0)");

}

for (var i=8;i<=9;i++){

jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(255,165,0)");

   }

   for (var i=10;i<=11;i++){

jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(60,179,113)");

}

});

Page 1 / 1

What is really happening is that they can select them, but they can’t see what they’ve selected. Because you’ve applied the background color directly to the elements, those are overriding the .q-checked style.

You can add an important CSS style something like this to the question text:

<style>
.Skin .NPS label.SingleAnswer.q-checked { background: #0091e4 !important; }
</style>

Also, your JS could be more efficient:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery(this.questionContainer).find("td label.SingleAnswer").each(function(i) {
		var label = jQuery(this);
		label.find("span").css("color","#ffffff");
		if(i<7) label.css("background-color","rgb(255,0,0)");
		else if(i<9) label.css("background-color","rgb(255,165,0)");
		else label.css("background-color","rgb(60,179,113)");
	});
});

@TomG Thank you! It worked.

Hello, I am facing the same problem, but the tips are not working with me.

Here is my js code:

label#QID4-0-label.SingleAnswer{

color :red !Important;

}

label#QID4-1-label.SingleAnswer{

color :red !Important;

}

label#QID4-2-label.SingleAnswer{

color :red !Important;

}

label#QID4-3-label.SingleAnswer{

color :red !Important;

}

label#QID4-4-label.SingleAnswer{

color :red !Important;

}

label#QID4-5-label.SingleAnswer{

color :red !Important;

}

label#QID4-6-label.SingleAnswer{

color :red !Important;

}

label#QID4-7-label.SingleAnswer{

color : #f9d71c !Important;

}

label#QID4-8-label.SingleAnswer{

color : #f9d71c!Important;

}

label#QID4-9-label.SingleAnswer{

color :green !Important;

}

label#QID4-10-label.SingleAnswer{

color :green !Important;

}

label#QID4-0-label.SingleAnswer.q-checked {