SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populating div contents

    Hey guys, I have this code:

    HTML Code:
    function prefillheading() {
    
    	var val = document.getElementById("adname").value;
    	var adtitle = document.getElementById("adtitle");
    	adtitle.innerHTML = val;
    	
    }
    
    <input type="text" id="adname" name="adname"  onKeyUp="prefillheading();">
    
    <div class="adboxheading" id="adtitle"></div>
    So when the user enters something in the input box it goes into the div, this works really well but when the page loads there is already some content that is being pulled from a database, I want that text to be there at the start and then when the user changes something it does what its doing.

    Thanks in advance
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have noticed this too. If the user refreshes the page with 'F5' then the next page sees that key event. So make sure something other than 'adname' has the focus on page load. For example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('inp2').focus();
      document.getElementById('adname').onkeyup = prefillheading;
    }
    function prefillheading() {
    	var val = document.getElementById("adname").value;
    	var adtitle = document.getElementById("adtitle");
    	adtitle.innerHTML = val;
    }
    </script>
    </head>
    <body>
    <input type="text" id="adname" name="adname" value='default'>
    <div class="adboxheading" id="adtitle">some content that is being pulled from a database</div>
    <input type="text" id="inp2" name="inp2" value='default 2'>
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much Mike did the trick nicely, one quick question with this line:
    HTML Code:
    window.onload = function()
    Why do you not need to name this function?
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,854
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by webnoob View Post
    Thanks very much Mike did the trick nicely, one quick question with this line:
    HTML Code:
    window.onload = function()
    Why do you not need to name this function?
    It's called an anonymous function. It doesn't need to be named because the code contained within brackets executes as soon as the window loads. If the function was named, it would need to be called somewhere else.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheesedude is right on

    We assigned a function reference to the onload property of the window object.

    We can even 'call' that function like this: window.onload();

    It could also be done like this:
    Code:
    window.onload = myOnLoad;
    
    function myOnLoad()
    {
      //...
    }

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,854
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    It could also be done like this:
    Code:
    window.onload = myOnLoad;
    
    function myOnLoad()
    {
      //...
    }
    MikeFoster, it is my understanding that it is not possible to pass parameters to myOnLoad using that calling syntax. Is that correct? Or is that only thecase when assigning as a callback function like for Ajaxobject.onreadystatechange?

    I'm pretty new to javascript. I have prior programming experience in Visual Basic, C++, and PHP. There are some syntax things in javascript that really confuse me. This was one of them. And there are others...

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a C programmer from way back so I understand what you are saying. There are some concepts in Javascript that are hard for me because I can't let go of my C perspective

    For your question... yes and no.

    We can execute these statements:

    myOnLoad(arg1, arg2);

    window.onload(arg1, arg2);

    and they both work just fine. However this is not the purpose of this property. This property is called by the system after the page has completed loading. This system call (which we call the 'load' event) passes no parameters.

    These "DOM0 event listeners" such as 'onload', 'onclick', 'onchange', etc, are just properties of objects to which we can assign function references. The system will call our functions when the specific event occurs. Most of them 'will' pass an argument to our function - an event object - but not the load event.

    I'm sure you already know some of this but I was just trying to be complete.


  8. #8
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the information guys, I had a rough idea and that clarifies it.
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"


Bookmarks

Posting Permissions

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