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 5 of 5
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Changing contents of a DIV on-the-fly?

    Hi.

    I have a requirement to do something which, on the face of it, seems pretty simple!

    In it's simplest incarnation, it would just be a button, somewhere on a page, which, when clicked, would cause the content of something else on the page to change.

    Here is an example of a noddy piece of code which I wrote to try and do this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
    <html>
      <head>
        <title>"Dynamic Content Test"</title>
    
        <script language="javascript" type="text/javascript">
    
          var counter = 0;
    
          function doIncrement(id)
            {
              thing = document.getElementByID(id);  //Get the thing to be fiddled with.
              thing.content = counter;  //Fiddle with it.
              counter++;  //Increment the counter.
            }
    
        </script>
      </head>
    
      <body>
        <input type="button" value="click me" onclick="doIncrement('counter-display');">
        <div id="counter-display"></div>
      </body>
    </html>
    What I was hoping for was a web page that starts with a single button on it and nothing else (this is all fine).

    When the user first clicks the button, "0" should appear under the button. Subsequent clicks should cause the number under the button to be incremented in steps of 1 each time. This, however, does not happen! All I get in the error tally for the web browser is - "error on line <whatever> (the line it complains about is thing = document.getElementByID(id);) - object does not support this property or method".

    I have tried several variations on the theme (all of which seem to be even further from the mark!).

    What am I doing wrong?

    Thanks,
    Mike.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    document.getElementById - the last d should be lower case mate.

    also this line:
    Code:
    thing.content = counter;  //Fiddle with it.
    would be better off as:
    Code:
    thing.innerHTML = counter;
    hope this helps

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Hmmmm ...

    I have managed to do it using a text input called "display" inside a dummy form called "myform" and then using the javascript:

    Code:
    var counter = 0;
    
    function increment()
    {
      document.myform.display.value = counter;
      counter++;
    }
    this works fine, but is there any way to get at divs that are inside a form?

    I think I'm getting there ....
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    accessing the div using getElementById is independent of accessing form object elements mate. ie it should make no difference if the div is inside or outside of the form as that method targets only the id of the html element.

    This is a working script that you hopefully will able to use:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var count = 0;
    function doIncrement(sId) {
    	count++;
    	document.getElementById(sId).innerHTML = count;
    }
    </script>
    <style type="text/css">
    body {
    	font-family: "Courier New", Courier, mono;
    	font-size: 12px;
    	color: #000000;
    }
    </style>
    </head>
    
    <body>
    <form name="frmCounter">
    <input type="button" name="btn" value="Count" onclick="doIncrement('divCounter');">
    <div id="divCounter"></div>
    </form>
    </body>
    </html>
    Hope this helps

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Thanks!

    I also found a nice site in one of the pinned topics: http://www.javascriptkit.com/jsref/

    This is helping a lot also as I am a Javascript newbie!
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!


  •  

    Posting Permissions

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