Javascript, WebKit and ‘closed’

The other day I was playing around with a simple letter scrambler script that I had written to assist my daughter with a birthday party game. The concept is simple enough… enter a phrase, hit a button and the phrase gets “cryptoquoted”, a process where each letter in the phrase is substituted with another letter. One of the things I designed this program to do was hide the input box so that, if you were viewing it on the web, the solution would not be visible to anyone looking at the puzzle. But I also programmed it so that if you click a link, the input box would be revealed. This toggling of the visibility of the input box is simple enough to do. Just add a little jQuery and BAM!, you have a simple revealer.

And this is exactly how this performed until the last time I tried it a couple of days ago. My toggler suddenly stopped working right, but only in Chrome and Safari. All of the javascript was firing in the proper order, and the function I had written was being called but my slider was not sliding. After digging into this a little bit, and doing a bit of debugging, I found out that a variable name I was using the monitor the state of the visibility of the input box was being clobbered in Chrome and Safari. Firefox worked just fine as it always has. The variable name I was using was closed.

// Set the closed flag
var closed = true;
 
/**
 * Toggles visibility of the input box
 */
function toggleSolution() {
	if (closed) {
		closed = false;
		$('#puzzle-key').slideDown();
		$(this).text('Hide solution');
	} else {
		closed = true;
		$('#puzzle-key').slideUp();
		$(this).text('Show solution');
	}
}

When inspecting this code in Chrome Developer Tools, regardless of any actions, events or any other browser interaction, the closed variable always was valued as false. I still don’t know why this is happening, but I do know this is a WebKit issue. And I also know that changing the variable name from closed to _closed solved the issue I was having. Also, as a simple test, without declaring the variable anywhere in my code, I opened up the console on a page without any javascipt at all and, sure enough, the variable was set to the value false.

So if you writing javascript and run across an issue where you are using a variable named closed in your code that always seems to be valued at false, be aware this might be an issue with your browser and simply changing the name of your variable in your code might make things all better for you.