I'm not a newbie at programming (I hail from way back in the GW-BASIC days, and made it through to C++ in college), but I'm newbie at JavaScript and obviously haven't internalized the little bits that can break a program.

Well, my program's broken. It works okay until I add one line of Javascript, at which point it kills further progression of the Squiffy script into the next section of my game. And if I can't figure out how to make one function call work, I don't hold out much hope for the rest of this enterprise

Here is how the code made it through to Squiffy's story file:

'js': function() {
	newTheme('ZeyMidnight.css');
},

And here are my declared functions, in the HTML document itself. I'm adding the entire script section, at the bottom of the body section (just before the closing </body> tag), so if anything's weird you can point it out.

<script src="jquery.min.js"></script>
<script src="story.js"></script>

<script> /* Squiffy's Native Functions */
	$(function(){
		$('#squiffy').squiffy();
		$('#restart').click(function () {
			$('#squiffy').squiffy('restart');
		});
	});
</script>
<script> /* Zeyovian Functions */
	function newTheme(theme) {
		if (!plain) {
			document.getElementById('theme').setAttribute('href', theme);
		}
	}
	/* The title fades out every time there's a new theme. */
	/* CSS handles transition and timing.  Assuming this works, we drop the defined color for the faded class. */
	function titleFadeout() {
		var bg = getComputedStyle(document.body).getPropertyValue("background-color");
		document.getElementById("theTitle").style.color = bg;
	}
	
	/* Change the location titles. */
	function newLoc(loc) {
		document.getElementById('loc').innerHTML=loc;
	}
	function newSubloc(loc) {
		document.getElementById('subloc').innerHTML=loc;
	}
</script>

Once I hit the link that starts the story proper and runs that little snippet of code, it just shows a blank screen. None of the rest of my story comes through. Help?

Note: The "plain" variable gets set when you choose whether you want changing themes or just a normal theme the whole way through. I like my changing themes but I know some players might not like them or might have vision problems, so I give them the option of avoiding the themes entirely.

Experimenting a bit. First I put an else segment on the IF part, and then I turned it into an explicit "if this isn't true" part. It still fails. Then I commented out the contents of the function, and the program runs properly.

So it's somewhere in this code here:

if (plain != true) {
	document.getElementById('theme').setAttribute('href', theme);
}
else {
	newLoc("Whoops");
}

Now, I had this working earlier before integration with Squiffy, and the new themes were fine. I'm gonna go experiment with that again and see if the code works when not messing with Squiffy. But I'm failing to see anything weird with the code. Again, JavaScript newbie here, and I could really use some fresh (and more experienced) eyes to see what I'm failing to see.

Never mind, I think I just figured out the problem. Will be testing this.

Nope, totally did not figure out the problem.

I did realize that I was failing to distinguish between Squiffy's internal set of variables and JavaScript's, which became clear upon reviewing Squiffy's attributes page. So I tried to put that information to work.

I managed to make some variables cross over:

    var plain = squiffy.get("plain");
    squiffy.set("jplain", plain);

Squiffy's Plain: {plain}
JavaScript's Plain: {jplain}

Both of these agree with each other, and agree with the links that set them to get to this page. So I can set them to true or false, and both Squiffy and JavaScript have access to this setting.

BUT! My newTheme function is still failing to pick up on any of this!

function newTheme(theme) {
	var plain = squiffy.get(plain);
	alert (plain);
	if (!plain) {
		document.getElementById('theme').setAttribute('href', theme);
	}
}

It's not running at all, which I take to mean that there's an error in here that is preventing the entire script from functioning.

I tried it while Squiffy was the only thing messing with variables, and that didn't work. So I put in a direct call here, and that didn't work either.

I tried commenting out the document call there and adding the alert to see if it were getting the right variable, and even that isn't working.

It's like the thing refuses to interface with Squiffy's variables at all!

I am at an utter loss. I've spent several hours today going through beginner-level JavaScript lessons and it seems straightforward, pretty simple even, nothing particularly weird or hard to grasp. I will continue working my way through the lessons but... what the hell is going on here??

Apparently booleans hate me. Switching to numbers has cleared the whole thing up.

This is unacceptable. Booleans are useful and straightforward yes/no, true/false quantities that numbers cannot adequately substitute for (not least because if I code for an expected dichotomy, a number can always be a third option, while a boolean by nature cannot be).

However, for now the solution works, and I will wait for an answer as to why booleans are acting crazy.

ETA: Solution works only if I put the if statement ("did the user actually want this setting?") in Squiffy. The minute I move it to be internal to the function, it fails again.

This is also unacceptable, as it means adding extra code to every single function call, rather than having the code work inside the function itself.

I hope someone can explain this to me so I can do it right, because this is clearly wrong.

ETA 2: Now I'm double-guessing whether I was using assignment instead of equals earlier... but I was using not-equals more often, so I don't think that's the problem. Yargh.

When you get a problem like this, the very first thing to do is look in your browser console. On Chrome you get to it from the View menu, then Developer, then JavaScript Console.

Firstly, this will never work:

var plain = squiffy.get(plain);

It should be:

var plain = squiffy.get("plain");

Because otherwise it's trying to get the attribute value named by the value of "plain", which doesn't exist yet.

But that still won't work, because you're running this in an external script tag. External scripts can't access Squiffy directly using things like "squiffy.get" (because Squiffy doesn't add anything to the global window object - this is so you can have multiple Squiffy stories in the same HTML page). You have to access it using the jQuery element instead. The HTML element is called "squiffy", and you can call "get" and "set" on it like this:

$("#squiffy").squiffy("set", "something", 123);
$("#squiffy").squiffy("get", "something");   // returns 123

Soooo something like this should work (not tested)...

function newTheme(theme) {
   var plain = $("#squiffy").squiffy("get", "plain");
   alert (plain);
   if (!plain) {
      document.getElementById('theme').setAttribute('href', theme);
   }
}

Okay, so... that seems to have worked, and I have a value that comes through to my JavaScript.

But I'm not sure why this isn't working to sort through which set of themes to use. It clearly has a different themestyle each time, but evidently my syntax is wrong for basing a switch statement on this value, because it keeps going straight through to default:

function newTheme(theme) {
	var themestyle = $("#squiffy").squiffy("get", "themestyle");
	newLoc(themestyle);
	switch (themestyle) {
		case "full":
			/* theme = theme;  Don't need to change anything. */
			newSubloc(theme);
			break;
		case "pale":
			/* Use alternates for the dark versions. */
			break;
		case "dark":
			/* Use alternates for the light versions. */
			break;
		case "plain":
			/* Don't change it at all. */
			theme = "";
			newSubloc(theme);
			break;
		default:
			/* Don't change the theme. */
			theme = "";
	}
	if (theme != "") {
		document.getElementById('theme').setAttribute('href', theme + ".css");
	}
}

All these extra quotes are throwing me for a bit of a loop, because in my previous languages you'd be tossing strings everywhere instead of referencing variables... and I guess that's actually what's happening here as well, except that the strings are what's needed by the functions, which is something I still have to wrap my head around.

Note: I threw in newLoc() and newSubloc() in to show me which spots of the code it's getting to and what the variables are at the time. I'll see about figuring out the browser console thing later.