SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to run a JS function on a content element when the page is loaded?

    I've written a JavaScript function which does some stuff to the content of another element. For debugging I ran it from onclick, for example:

    Code:
     <span onclick="xyz(this)">abc</span>
    Once it was working, I wanted to call it when the page finished loading:

    Code:
     <span onload="xyz(this)">abc<span>
    Surprise! It did nothing. The function was never called.

    I looked up onload and found that it's supported by <body>, <frame>, <script>, and a few other tags, but not by <span>.

    That kind of makes sense to me, but... now what? Content tags like <span> don't seem to have any event that is fired when a page is loaded. How can I get that result?

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Hey Orthoducks,

    If you want some JS to run once the page has finished loading, just put it in a script tag before the closing </body> tag, like this:

    HTML Code:
            <script src="js/myscript.js"></script>
            <script>xyz();</script>
        </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for trying to answer my question, but it's not clear to me how that would work. If I put the function call in open code in a <script> block, it's no longer in the element that the function is supposed to operate on, and xyz(this) becomes meaningless.

    I could make the code work by changing the argument from this to something like document.getElementById("Item_27"), where a bunch of elements in the page are labeled id="Item_1", id="Item_2",... id="Item_27",... but that would a very ugly (and clumsy, and error-prone) solution!

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by Orthoducks View Post
    I could make the code work by changing the argument from this to something like document.getElementById("Item_27"), where a bunch of elements in the page are labeled id="Item_1", id="Item_2",... id="Item_27",... but that would a very ugly (and clumsy, and error-prone) solution!
    What does your code do to the <span> elements? One option would be to grab a reference to the containing element and then loop over the children, but this only works if all the <span>'s are together in the page. Another option would be to add a class to all the target elements to allow you to select them. Either way, it's preferable to avoid attaching event handlers directly in your HTML.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The purpose of the code is to resolve references to items in a numbered list; that is to replace a placeholder with the number of a designated item.

    What I ended up doing is a lot like what you suggested. The reference now looks like this:

    Code:
    If the user is already defined, go to step <span class="xref">UserDefined</span>.
    To define the cross-reference target:

    Code:
    <li id="UserDefined">...</li>
    At the end of the body:

    Code:
    <script type="text/javascript"> resolveXrefs(); </script>
    I didn't want to have the extra bit of JavaScript stuck at the end of the body, but it makes the cross-references simpler.


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
  •