Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post

    Remaining on same page

    Hi all,
    I decided to start learning JavaScript yesterday and I have come up with the following code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>JS Practice</title>
    </head>
    
    <body>
    
    <form method="post">
    <input type="button" value="Add to basket" name="Add to basket" onclick="addToBasket()"/>
    </form>
    
    <script type="text/javascript">
    var tshirt = 34.99;
    var total = 0;
    var i = 0;
    function addToBasket() {
    var clothesArray = new Array(i);
    total = total + tshirt;
    clothesArray[i] = total;
    document.write(clothesArray[i]);
    i = i + 1; }
    </script>
    
    <script type="text/javascript">
    document.write(total);
    </script>
    
    </body>
    
    </html>
    Whenever I run the addToBasket() function it loads a new page, but I don't want that to happen. I want it to remain on the same page and see the value being increased.

    How would I go about doing so?

    Thanks for any help

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You might need something like
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>JS Practice</title>
    <script type="text/javascript">
    var tshirt = 34.99;
    var total = 0;
    var i = 0;
    function addToBasket() {
    var clothesArray = new Array();
    total = total + tshirt;
    clothesArray[i] = total;
    //alert(clothesArray[i]);
    //document.write(clothesArray[i]);
    document.getElementById('mySpan').innerHTML=clothesArray[i];
    i = i + 1; 
    }
    </script>
    </head>
    
    <body>
    
    <form method="post">
    <input type="button" value="Add to basket" name="Add to basket" onclick="addToBasket()"/>
    </form>
    <span id="mySpan"></span>
    </body>
    </html>
    as document.write() executes at the time of page load.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    as document.write() executes at the time of page load.
    Is there a way to show the value on the same page without reloading it or having a popup box?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by webguy08 View Post
    Is there a way to show the value on the same page without reloading it or having a popup box?
    Have you tried my above posted code?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Have you tried my above posted code?
    Yes.

    5 char

  • #6
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    So does anyone know?

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    The code posted by abduraooft does what you want. It shows the value on the same page, just below the button ''without reloading it or having a popup box''.

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    18
    Thanked 1 Time in 1 Post
    Quote Originally Posted by webguy08 View Post
    So does anyone know?
    The code posted by abdur does exactly what you need to. He uses getElementById to access and dynamically change page content for you.

    I hope this explains it a little better:
    All of the code in your original post is performed right when the page loads. That's it. The page loads, executes your code, and then it's over. You can't change it.

    What abduraooft did was place some of the code into functions, which means they are not executed until told to.
    Last edited by TheTot; 02-01-2009 at 09:53 PM.


  •  

    Posting Permissions

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