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
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with document.write

    Hello, I'm new to Javascript.

    I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write!

    For example,

    if I have a var car =3
    and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button)
    and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable?

    Thanks!

    So I want to have a button that when I click it will change this variable and that number will change live on the page.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    You can *NOT* use document.write in response to *ANY* human interaction.

    That's because if you use document.write after the HTML page is fully loaded, it *WIPES OUT* the entire HTML page, including even the JavaScript that did the document.write.

    In general, you should simply avoid using document.write. There are a few things it can be used for, but until you understand what they are, it's best to just avoid it completely.

    The most general way to change page content is to use
    Code:
       document.getElementById("someId").innerHTML = ...new content...
    If the element in question is a <form> field, use .value in place of .innerHTML.

    So in your case, you might have
    Code:
        Number of cars: <span id="carCount"></span>
    And so you would use
    Code:
        document.getElementBYId("carCount").innerHTML = ++car;
    or something along those lines.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Another way to do it:
    Code:
    Number of cars: <input type="button" name="cars" value="1" onclick="this.value=(Number(this.value)+1);"/>
    So the button's value would actually be the number of cars. And by clicking on it, you use increase the number that the button shows by one.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks but I'm still a bit confused. How exactly would I go about writing this code then?

    Like a simple one which would say: You have X cars.

    And when you click a button, this X increases by 1.

    So if it says: You have 3 cars then I click the button, the text will instantly change to: You have 4 cars.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    I showed you two different ways, already. If you don't show your HTML code, I can't very well guess at exactly what it is you need.

    The simplest possible page:
    Code:
    <html>
    <body>
    <form>
    You have <span id="cars">3</span> cars.
    <hr/>
    <input type="button" value="more cars" 
           onclick="var s=document.getElementById('cars');s.innerHTML=(Number(s.innerHTML)+1);"/>
    </form>
    </body>
    </html>
    But I suspect that isn't what you want. But without you showing me your page, I don't know what else to show you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh ok thanks a lot! This is totally HTML though. Is there any way to do this with javascript then?

    Sorry if I sound very noobish, I've just started coding for the first time in my life today haha.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Ummm...that *IS* javascript.

    Code:
    <input type="button" value="more cars" 
           onclick="var s=document.getElementById('cars');s.innerHTML=(Number(s.innerHTML)+1);"/>
    The part in red there is JavaScript.

    You can't write onclick handlers (or any kind of event handler) in HTML alone. You have to use JavaScript to do so.

    There's no difference between doing what I showed there and doing it like this, instead:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function zamberDoodlyWonkus( )
    {
        var s=document.getElementById('cars');
        s.innerHTML=(Number(s.innerHTML)+1);
    }
    </script>
    </head>
    <body>
    <form>
    You have <span id="cars">3</span> cars.
    <hr/>
    <input type="button" value="more cars" 
           onclick="zamberDoodlyWonkus( );"/>
    </form>
    </body>
    </html>
    Yes, I chose a silly function name...just to emphasize that names are pretty much up to you. Sure, a more reasonable name might have been "bumpCarsCount()". But JavaScript doesn't care.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    amster (12-22-2011)

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I see. Thanks a lot for your help! I still have lots and lots to learn haha.


  •  

    Posting Permissions

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