CODEWITHSUNDEEP
jquery
dotslashlu
dotslashlu

Reputation: 3401

Why this easy jquery code won't change the font-size

Here's my jquery code. If you can't see any flaw in it, please proceed to see JSfiddle here at http://jsfiddle.net/J4ZgB/3/ Thanks.

$(function(){
    $("#a").click(function(){
        var s=$('#p_content').css("font-size");
        s+=4;
        $('#p_content').css("font-size",s+"px");
    })
})

Upvotes: 0

Views: 989

Answers (5)

jfriend00
jfriend00

Reputation: 708106

Because the value of s is "14px" so "14px" + 4 + "px" is "14px4px" which is not valid CSS. You have to parse the number out of "14px" before treating it like a number.

You can see that here: http://jsfiddle.net/jfriend00/J4ZgB/2/. Just click on your link and see what the alert shows.

You can use this:

$(function(){
    $("#a").click(function(){
        var item = $('#p_content');
        var s = parseInt(item.css("font-size"), 10);
        s += 4;
        item.css("font-size", s + "px");
    })
})

Which you can see working here: http://jsfiddle.net/jfriend00/J4ZgB/8/.

FYI, I also saved the jQuery object into a local variable rather than running the selector query twice in the same block of code.

Upvotes: 2

Robin Andersson
Robin Andersson

Reputation: 5390

When you retrieve the current font size you get a string returned:

var s = $('#p_content').css("font-size"); //Returns 14px

Try to parse the integer value when you get it:

var s = parseInt($('#p_content').css("font-size"));

Second error is that the paragraph selector string is wrong when you try to get it the second time, where it should say #p_content it says #p_cont.

Working fiddle: http://jsfiddle.net/J4ZgB/11/

General advice is to use the console logging more and check what values you are getting from functions in order to troubleshoot your own scripts.

Upvotes: 1

Niels
Niels

Reputation: 49949

Cus you didn't write your #p_cont as #p_content

$('#p_cont').css("font-size",s);

Should be

$('#p_content').css("font-size",s);

And I have added parseInt

var s=parseInt($('#p_content').css("font-size"));

DEmo: http://jsfiddle.net/J4ZgB/9/

Total result:

HTML:

<span id="a">click to make font bigger</span>
<div id="p_content">
Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML. ...
</div>

Script:

$(function(){
    $("#a").click(function(){
        var s=parseInt($('#p_content').css("font-size"));
        s+=4;
        $('#p_content').css("font-size",s);
    })
})

Upvotes: 2

ThiefMaster
ThiefMaster

Reputation: 318778

Try this:

$(function(){
    $('#a').click(function(){
        var s = parseInt($('#p_content').css("fontSize"), 10);
        s += 4;
        $('#p_content').css('fontSize', s+'px');
    })
})

Upvotes: 1

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

You had two errors.. fixed code:

$(function(){
    $("#a").click(function(){
        var s = parseInt($('#p_content').css("font-size"), 10);
        s += 4;
        $('#p_content').css("font-size",s+"px");
    })
})
  1. You need to parse the numeric value of the font size, which contain "px" - luckily, parseInt takes the first digits in a string and converts them to number ignoring the rest of the string.
  2. You tried to set font of element with ID p_cont (in jsFiddle) while the real ID is p_content.

Updated jsFiddle.

Upvotes: 5

Related Questions