SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can somebody tell me what's wrong with this attach sound to my anchors collection js.

    Hi
    I am attempting to write a script that resides in a separate linked file as per the latest recommendations on keeping your scripts in a separate file they call the behavior layer. The script attaches sounds too in onclick event to all tags of type anchor (<a> tags.) That is if you can help me get it to work its will. When I write a script which uses IDs for the attachments it works fine see below.

    HTML
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Attach sound per anchor ID</title>
     <meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />
    
    <script src="attachSoundPerAnchorID.js" type="text/javascript"></script>
    </head>
    <body>
      <embed id="thup" src="thup.wav" loop="false"
      autostart="false" hidden="true" enablejavascript="true"></embed>
     <p>&nbsp;&nbsp;
        <a id="anchor1" href="#">one</a>
        <br><br><br>&nbsp;&nbsp;
        <a id="anchor2" href="#">two</a>
     </p>         
    </body>
    </html>
    [HTML]
    Javascript
    Code:
    function onClickSound(){
             document.getElementById('thup').Play(); 
    }
    window.onload = function () {
    document.getElementById("anchor1").onclick=onClickSound;
    document.getElementById("anchor2").onclick=onClickSound;
     }
    However when I try to use an anchors collection it does not work see below.

    HTML
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Attach sound on all anchors</title>
     <meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />
     
    <script src="AttachSoundOnAllAnchors.js" type="text/javascript"></script>
    </head>
    <body>
        <embed id="thup" src="thup.wav" loop="false"
        autostart="false" hidden="true" enablejavascript="true"></embed>
       <p>&nbsp;&nbsp;
         <a href="#">one</a><br><br><br>&nbsp;&nbsp;
         <a href="#">two</a> 
       </p>
    </body>
    </html>

    JavaScript
    Code:
    var anchors;
    function onClickSound(){
             document.getElementById('thup').Play(); 
    }
    
    function allAanchor(){
      for (var i=0; i < anchors.length; i++) {
             var anchor = anchors[i];
             anchor.onclick=onClickSound(); 
            }
    }
    
    window.onload = function () {
    anchors = document.getElementsByTagName("a");
    allAanchor();
     }
    The JavaScript and HTML code immediately above does not work. I put a "var anchor;" statement outside of all functions since including it inside the functions generated an anchors variable not defined error. But this only gets rid of the error it does not let the script work. So I would be most appreciative if someone here to tell me how I attach a sound to all anchor tags on a HTML page without explicitly giving each anchor an ID and then explicitly writing code to attach a sound to that ID.

    Very sincerely
    Marc

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK changing from
    Code:
    function allAanchor(){
      for (var i=0; i < anchors.length; i++) {
             var anchor = anchors[i];
             anchor.onclick=onClickSound(); 
            }
    }
    to

    Code:
    function allAanchor(){
      for (var i=0; i < anchors.length; i++) {
             var anchor = anchors[i];
             anchor.onclick=onClickSound; 
            }
    }
    Makes it work. I do not understand why. Does anybody have a reference about this evoking functions this way stuff.
    Thanks
    Marc


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
  •