CODEWITHSUNDEEP
javascriptjqueryhtmlcss
benjamin
benjamin

Reputation: 39

Jquery to increase font size of HTML contents in DIV

Below is the javascript I used to increase the font size of all HTML contents within #myContent. The strange thing here is that whenever increaseFontSize() is invoked, the font size does not get increased, instead it gets reduced. Can some kind souls advise on what I have done wrong. Thank you.

I put up an alert on fontSizeStr and fontSize. fontSizeStr reads 14 while fontSize reads 12. The last line should change the contents to 12px but it does not. The font decreased.

:
:
function increaseFontSize() {
   var fontSizeStr = $("#myContent").css('font-size');
   var fontSize = parseInt (fontSizeStr,10) + 2;
   $("#myContent").css("font-size", fontSize + "px");
}
:
:
:
<div id="myContent">
    <html>
    :
    :
    <p>Actual Contents 1</p>
    <p>Actual Contents 2</p>
    :
    :
    </html>
</div>
:
:

[Updates]: - Added "px" to the end of the fontSize. - Changed from "fontSize" to "font-size"

Upvotes: 1

Views: 803

Answers (4)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

Here is your working code of JSFIDDLE.

http://jsfiddle.net/alaksandarjesus/xju2xksp/1/

<div id="myContent">
    <p>Actual Contents 1</p>
    <p>Actual Contents 2</p>
</div>
<button onClick="increaseFontSize()">Click Me</button>

Tested in my localhost, with html tags, its working fine.

Upvotes: 0

Chander .k
Chander .k

Reputation: 541

please add - in fontSize like font-size

$("#myContent").css("font-size", fontSize + "px");

Use 

var fontSizeStr= fontSizeStr.substring(0,fontSizeStr.length-2);

Upvotes: 1

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

function increaseFontSize() {
   var fontSizeStr = $("#myContent").css('font-size');
   var fontSize = fontSizeStr.substring(fontSizeStr.length-2, fontSizeStr.length);
   var newFontSize = parseInt (fontSize,10) + 2;
   $("#myContent").css("font-size", newFontSize + "px");
}

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You need to update

 $("#myContent").css("fontSize", fontSize);

to 

 $("#myContent").css("font-size", fontSize + "px");

Upvotes: 1

Related Questions