SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    creating a onclick attribute using DOM

    HI,

    Code JavaScript:
    var titlea = document.createElement('a');
        titlea.id = 'list_' + count;
        titlea.href = '/results.php?' + articleid;
        var txt = document.createTextNode('select....');
        titlea.appendChild(txt);
        con.appendChild(titlea);

    I have this code. I've created an a tag with with a href and id attribute. I also need to add some javascript:

    onclick="replaceParent();"

    I've googled for a solution but can't find an answer....how do i do this?

  2. #2
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    heaven
    Posts
    953
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    HI,

    Code JavaScript:
    var titlea = document.createElement('a');
        titlea.id = 'list_' + count;
        titlea.href = '/results.php?' + articleid;
        var txt = document.createTextNode('select....');
        titlea.appendChild(txt);
        con.appendChild(titlea);

    I have this code. I've created an a tag with with a href and id attribute. I also need to add some javascript:

    onclick="replaceParent();"

    I've googled for a solution but can't find an answer....how do i do this?
    The best way to do this would be to assign the link an id or a class.

    Code:
    function do_onclick()
    {
       var obj = document.getElementByID('IDNAME');
       obj.onclick = function()
       {
          replaceParent();
       }
    }
    
    window.onload = function()
    {
       do_onclick();
    }
    With classes its a little be different by not that much.

    Code:
    function do_onclick()
    {
      var anchors = document.getElementsByTagName('a');
      for(var i=0; i<anchors.lenght; i++)
      {
          var obj = anchors[i];
          if(obj.className == 'CLASSNAME')
             obj.onclick = function()
             {
                 replaceParent();
             }
      }
    }
    
    window.onload = function()
    {
       do_onclick();
    }
    That's an example of how you would do it. But I don't know if it will work or not so don't take my word for it. I'm in Las Vegas flying to CT and I haven't slept for 24 hours . I may have a few errors here or there. I hop eyou get the general idea though .

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    onclick is an event handler not an attribute and so trying to create an onclick attribute will not work as event handlers need to be added differently from attributes.

    The following will add the event handler you need:

    Code:
    titlea.onclick="replaceParent();"
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Aha that'll do the job nicely. thanks...

    I do wonder if theres a way to just write that line with javascript. I'm kinda surprised if there isnt.

    EDIT: Got you, thanks Felgall

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can set an event handler as an attribute in modern browsers (no, IE is not modern):
    Code:
    <div id="myDiv">test</div>
    
    <script>
    var node = document.getElementById("myDiv");
    node.setAttribute("onclick", "alert('div was clicked');");
    </script>

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    just using node.onclick = instead of node.setAttribute("onclick", allows it to work in older browsers as well as modern ones. After all event handlers are not really the same as HTML attributes anyway since they don't work when JavaScript is disabled while attributes do.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    After all event handlers are not really the same as HTML attributes anyway since they don't work when JavaScript is disabled while attributes do.
    That sounded confusing.

    Are you trying to say that you perceive a difference between event attributes and non-event attributes because one is designed for scripting and the other is not?

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onclick, ondblclick, onmousedown, onmouseup etc are attributes. At least that is the way W3C calls them.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I think he may be saying that because they are script attributes, they have a more limited performance than the other attributes.

    http://www.w3.org/TR/html4/index/attributes.html


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
  •