I'm trying to increase the font size of my page using a javascript function but it's not working. Is there a syntax problem with my code or is it not possible to do what I'm trying to do?

Javascript:

function changeFontSize(fontvar) {
var div = document.getElementById("webchat_history");
var currentFont = div.style.fontSize.value;

div.style.fontSize = currentFont + fontvar+ "px";
}

HTML:
<span onClick="changeFontSize(10);" style="font-size:16px;">Aa</span>

I want to increase it by x amount (fontvar) rather than specifying a specific font size because my font sizes are set in an external stylesheet. When/if I need to modify the stylesheets, I'd rather not have to update the Javascript too.

I'm trying to increase the font size of my page using a javascript function but it's not working. Is there a syntax problem with my code or is it not possible to do what I'm trying to do?

Javascript:

function changeFontSize(fontvar) {
var div = document.getElementById("webchat_history");
var currentFont = div.style.fontSize.value;

div.style.fontSize = currentFont + fontvar+ "px";
}

HTML:
<span onClick="changeFontSize(10);" style="font-size:16px;">Aa</span>

I want to increase it by x amount (fontvar) rather than specifying a specific font size because my font sizes are set in an external stylesheet. When/if I need to modify the stylesheets, I'd rather not have to update the Javascript too.

• javascript
• html
• css
• font-size

• Do you get any errors in the Javascript console? – Barmar Commented Apr 29, 2013 at 15:45
• I think this line div.style.fontSize = currentFont + fontvar+ "px"; is operating with strings, so you will get "16" + "10" + px" resulting in "1610px" instead of "26" + "px"! – Ivozor Commented Apr 29, 2013 at 15:49
• I'm getting "Object Required" in the javascript console – Kenny Johnson Commented Apr 29, 2013 at 15:58
• @Ivozor, if that was the case, shouldn't I be seeing really LARGE font then? Or is 1610px too large for the browser to handle? – Kenny Johnson Commented Apr 29, 2013 at 16:03

3 Answers 3

This script should work:

function changeFontSize(fontvar) {
    var div = document.getElementById("webchat_history");
    var currentFont = div.style.fontSize.replace("px", "");

    div.style.fontSize = parseInt(currentFont) + parseInt(fontvar) + "px";
}

I found this amazing script: https://github./simplefocus/FlowType.JS

Demo: http://simplefocus./flowtype/demo.html

After additional debugging, I realized the "id" I was using, webchat_history, was not actually an ID. It was the class for ID history. I'm going to create additional classes and use document.getElementById('history').className = "webchat_history_medium"; to change font sizes.