So... how do I select the #story element (within javascript)?

Question

Here's what I'm attempting to do:

var settingFontSizeNames = ["15 px", "16 px", "17 px", "18 px", "19 px", "20 px", "21 px"];
var settingFontSizeHandler = function () {
	switch (settings.font_size) {
	case "15 px":
		document.getElementById("#story").style.fontSize = "15px";
		break;
	case "16 px":
		document.getElementById("#story").style.fontSize = "16px";
		break;
	case "17 px":
		document.getElementById("#story").style.fontSize = "17px";
		break;
	case "18 px":
		document.getElementById("#story").style.fontSize = "18px";
		break;
	case "19 px":
		document.getElementById("#story").style.fontSize = "19px";
		break;
	case "20 px":
		document.getElementById("#story").style.fontSize = "20px";
		break;
	case "21 px":
		document.getElementById("#story").style.fontSize = "21px";
		break;
	}
};
Setting.addList("font_size", {
	label		: "Font size:",
	list		: settingFontSizeNames,
	onInit		: settingFontSizeHandler,
	onChange	: settingFontSizeHandler,
	default		: "18 px"
});

But, this is only bringing up errors. Apparently, document.getElementById("#story") gives null.

So, what am I doing wrong? I can't find any examples of the correct to go about this. I hate these obscure selection things. So... help? This is the last hurdle. I solve this, and I go back to writing.

Answer 1

You are using the DOM getElementById() function, which means you don't add the hash (#) character to the ID you pass to it because the function knows the value you're using as a parameter is an element ID.

/* GOOD. */
var el = document.getElementById("story");

/* BAD. */
var el = document.getElementById("#story");

When you are using functions that take more complex selectors (like jQuery's $(selector) function) then you need to add a hash (#) character so the function knows that the value is an ID, and not an element type or CSS class name.

Comments

Cool. Thanks for saving me again, greyelf. I really appreciate it.

---

As a suggestion.  Two ways to make your font size setting more concise.

 

If you're married to the current space-bearing names:

var settingFontSizeNames   = ["15 px", "16 px", "17 px", "18 px", "19 px", "20 px", "21 px"];
var settingFontSizeHandler = function () {
	var pxSize = Number.parseInt(settings.font_size, 10);
	$("#story").css("font-size", pxSize + "px");
};
Setting.addList("font_size", {
	label    : "Font size:",
	list     : settingFontSizeNames,
	onInit   : settingFontSizeHandler,
	onChange : settingFontSizeHandler,
	default  : "18 px"
});

 

Or, if ditching the space within the names would be acceptable:

var settingFontSizeNames   = ["15px", "16px", "17px", "18px", "19px", "20px", "21px"];
var settingFontSizeHandler = function () {
	$("#story").css("font-size", settings.font_size);
};
Setting.addList("font_size", {
	label    : "Font size:",
	list     : settingFontSizeNames,
	onInit   : settingFontSizeHandler,
	onChange : settingFontSizeHandler,
	default  : "18px"
});

 

---

Oh cool. Yeah, that makes things much more compact. In the end, I went for the second example. It looks nice.