JavaScript Code to Change the size of a text

Discussion in 'JavaScript' started by Mentalhead, Jun 7, 2010.

0
  1. #1
    I have a JavaScript school project and I need to make the script that will change the size of the text on the screen.
    I've googled a lot and I've found few solutions but none of them are simple enough for me to understand.
    I admit, I just stared learning JavaScript, so I need to have a simple script that I can fully understand and explain it to my professor.
    I'm not asking that someone does it for me, I just need someone to explain it to me.
    Here's my code and I'm really hoping that someone can help me with it.
    Remember, try to keep it simple as you can.

    My HTML:
    <head>
    <script type="text/javascript" src="script.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body onload="f()">
    <div id="t">Sample text</div>
    <div>
    <a href="#" onclick="a()">+ font</a>
    <a href="#" >- font</a>
    </div>
    </body>
    </html>

    JavaScript:
    function f(){
    document.getElementById("t").style.fontSize="40px";
    }

    function a(){
    x=parseInt(document.getElementById("t").style.fontSize);
    x=x+5+"px";
    }

    For some reason, something is messed up in function a but I don't know what is it.
     
    Mentalhead, Jun 7, 2010 IP
  2. Purdy

    Purdy Active Member

    Messages:
    102
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #2
    In your a() function you are creating variable x and setting it to the current fontSize. Then you are increasing variable x by 5px. However, you forget to go back and set the fontSize (just because x is increasing doesn't mean the DOM element is changing). Add this to the end of function a():

    document.getElementById("t").style.fontSize=x;
    Code (markup):
     
    Purdy, Jun 7, 2010 IP