Not quite understanding how to have the click macro change its text color

tiwick

I'm using Sugarcube in Twine 2.0.1 and essentially wish the text to change color when a user clicks on it (I plan to also add changes to variables at the same time, but that part will be hidden from view).

I have dedicated quite a bit of time searching the forum and google in general, narrowing my code down to this:
<span id="etest"><<click "Test ears">><<replace "#etest">>body { color: red; "Test ears" }<</replace>><</click>></span>

While I'm no longer getting the Error messages, I'm currently only printing the text "body { color: red; "Test ears" }" after the user clicks the "Test ears" text.

I'm guessing that I might need to use class instead of id, since somewhere it says that id can only affect one thing while class can affect many. But simply switching the word id with class generates an error, so . . . yeah. Really trying to figure out this whole CSS/HTML/Javascript thing (far cry from BASIC).

TheMadExile

That's not how CSS works.

You will, very likely, want to add a class to your ID bearing element. For example:

<span id="etest"><<click "Test ears">><<addclass "#etest" "red">><</click>></span>

That doesn't remove the link, however, so if you wanted that done as well, then you'd need something like the following instead:

<span id="etest"><<click "Test ears">><<replace "#etest">>Test ears<</replace>><<addclass "#etest" "red">><</click>></span>

You'll also need to define what the class does by putting something like the following into your Story Stylesheet:

/*
	This will change the color of both normal and link text
	within the target element to red.
*/
.red, .red a {
	color: red;
}

tiwick

Thank you very much.