Is this a glitch?

Twine 2.3.5 and Sugar Cube 2.30.0

Hopefully this will be my last question for a while :sweat_smile:
But I’m having this really irritating issue that makes no sense.
Last night I had this code in my StoryCaption passage and the hair colour function was not working at all (It’s supposed to change the colour of the image using a variable the player has already set) and it gave me the error:

“Error: <>: bad evaluation: $UHairColour is not defined!”

(<> is supposed to be < < script > > )

which implies I’ve not created the variable, right? but that doesn’t make sense as on the same passage it was printing the variable ($UHairColour)

<<if $UHair == 1>>
	<img id="uhair" src="Images/hair.png"/>
<<else>>
	<img id="uhair" src="Images/hair2.png"/>
<</if>>
<<if $Gender == "Female">>
	<img id="body" src="Images/female.png"/>
<<else>>
	<img id="body" src="Images/male.png"/>
<</if>>
<<set $HairColour = 0>>
<<set $Hair = 0>>
<img id="outfit" src="Images/dress.png"/>

	<<script>>
 	   $("img#uhair").css("filter", "hue-rotate(" + $UHairColour + "deg)");
	<</script>>


BODY
<<print "Hair:">>
<<print $UHair>>
<<print "Haircolour:">>
<<print $UHairColour>>
CLOTHES
<<print "Outfit:">>
<<print $UOutfit>>

So I eventually gave up and quickly moved the code into its own passage called Wardrobe before I went to bed and didn’t test it, today I’ve tested it for the sake of it and it works, It changes the colour of the hair to anything the player sets the variable to however it still shows the same error I put above. Is this a glitch? is there anyway I can get the error to go away if the line is actually working? and do I have to change this if I want it to go in the StoryCaption passage? Any help would be awesome, thanks.

Where are you defining $UHairColour? All I see is $HairColour.

It’s already defined but in another passage which is a shop.
as you can see it prints the variable on that page though, here’s a preview:

Oh, I see the issue. It’s because you’re using the <<script>> tag.

From the docs:

Silently executes its contents as pure JavaScript code—i.e., it performs no story or temporary variable substitution or TwineScript operator processing. For instances where you need to run some pure JavaScript and don’t want to waste time performing extra processing on code that has no story or temporary variables or TwineScript operators in it and/or worry about the parser possibly clobbering the code.

Try replacing

<<script>>
    $("img#uhair").css("filter", "hue-rotate(" + $UHairColour + "deg)");
<</script>>

with

<<set jQuery("img#uhair").css("filter", "hue-rotate(" + $UHairColour + "deg)")>>
1 Like

@pinkyo

You can also use the <<run>> macro to achieve the same outcome, if you find that macro’s name makes more sense than using a <<set>> macro call in this use-case.

<<run $("img#uhair").css("filter", "hue-rotate(" + $UHairColour + "deg)")>>
1 Like

Ah, thank you ill not use the script tag again then, it works perfect now, although I’m using the Run macro that Greyelf suggested just for the simplicity.

In the future if you did want to use the <<script>> tag (since it looks cleaner than a bazillion << >> tags), you can still access the stored variables and temporary variables like so:

// $UHairColour
variables().UHairColour
    or
State.variables.UHairColour

// _UHairColour
temporary().UHairColour
    or
State.temporary.UHairColour