www.webdeveloper.com
Results 1 to 4 of 4

Thread: loop body?

  1. #1
    Join Date
    Jun 2012
    Posts
    2

    loop body?

    Hello,

    I am completely new to JavaScript, do forgive me if I ask the obvious.

    I'm just playing around, learning, and wanted to show number which increases every time you press a button.

    But it stops after one click. How do I make it continue?

    Thanks!

    code:

    <html>

    <head>
    <title>testeroo</title>

    <script type="text/javascript">

    x=2

    function plustwo(x)
    {

    x=x+2

    document.getElementById("number").innerHTML=x;

    }

    </script>

    </head>

    <body>

    <p id="number"></p>

    <button type="button" onclick="plustwo(x)">Plus Two</button>

    </body>

    </html>

  2. #2
    Join Date
    Jun 2012
    Posts
    2

    one solution, but doesn't seem right

    So I found a way to do it, but it doesn't seem the best way. What if you want do much more than just x=x+2?

    <html>

    <head>
    <title>testeroo</title>

    <script type="text/javascript">

    x=0

    function plustwo(x)
    {

    document.getElementById("number").innerHTML=x;

    }

    </script>

    </head>

    <body>

    <p id="number"></p>

    <button type="button" onclick="plustwo(x=x+2)">Plus Two</button>

    </body>

    </html>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,265
    The problem is with x, which can not be together a global variable (define out the function) and a local variable (as argument for the function)!
    You have to choice :
    //1/ - With your actual HTML
    Code:
    var x=0; // a global variable 
    function plustwo(){
       x+=2; // the same global variable but no argument for the function
       document.getElementById("number").innerHTML=x;
    }
    2/ - With a onclick="plusTwo(document.getElementById("number").innerHTML)"
    Code:
    // no variable definition but an argument the value of the paragraph (which is a string to convert to Number)
    function plustwo(x){
       document.getElementById("number").innerHTML=Number(x)+2;
    }
    NB: Do not use number for name, it is confusing with the Number object.

  4. #4
    Join Date
    Aug 2006
    Posts
    301
    not to show off, but you could even simulate a calculator,
    in this case the addition button doesn't do anything, you'd
    have to add a way to switch the mode which isn't that hard
    and give the function a better name like calc() instead of
    addIt():

    <html>
    <head>
    <title>testeroo</title>
    <script type="text/javascript">
    function addIt(int){
    /* grab the current numerical value from the page */
    var oldValue = parseInt(document.getElementById("number").innerHTML);
    /* add the integer passed in */
    var newValue = oldValue + int;
    /* update the page */
    document.getElementById("number").innerHTML = newValue;
    }
    function restart(){
    /* reset to zero */
    document.getElementById("number").innerHTML = 0;
    }
    </script>
    </head>
    <body>
    <p id="number">0</p>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(7)">7</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(8)">8 </button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(9)">9</button><br />
    <button style="width:30px;margin:5px" type="button" onclick="addIt(4)">4</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(5)">5</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(6)">6</button><br />
    <button style="width:30px;margin:5px" type="button" onclick="addIt(1)">1</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(2)">2</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(3)">3</button><br />
    <button style="width:30px;margin:5px" type="button" onclick="">+</button>
    <button style="width:30px;margin:5px" type="button" onclick="addIt(0)">0</button>
    <button style="width:30px;margin:5px" type="button" onclick="restart(9)">C</button><br />
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles