SitePoint Sponsor

User Tag List

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

    Passing parameters to an inner method?

    I believe at some time or in another I have passed parameters to an inner function by passing the parameter to the outer function. However whether I am remembering correctly or incorrectly my attempts to pass a parameter to a inner method has failed. If you look past he CSS and HTML in my example down to the JavaScript I show an example of code that does not work. And then show an example of code that does work. The code that does not work attempts to pass a parameter value of 500 to the method setTimeout. If I explicitly code this 500 into setTimeout and do not try to pass the value to setTimeout the code works. The code is supposed to pop up my hourglass for 500 ms then remove it. Like I have just said I can explicitly code 500 into my method but not pass the value to it the way I am doing why? And how do I do this passing to a inner method thing?

    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Show And Hide for a Time Interval</title>
    <meta http-equiv="Content-Type" content="text/html;
     charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
     <link rel="stylesheet" href="ShowAndHideTimeInterval.css"
     type="text/css"/>
    <script src="ShowAndHideTimeInterval.js"
     type="text/javascript"></script>
    </head>
    <body>
    <ul id="run">
    <li>
     <a id="Faster" href="#">
       <img src="p1images/strokeblackFaster.gif" alt="Faster"/>
          <img  class="hourglasses" id="hourglass1"
           src="1By1Trans.gif" alt="hourglass"/>
       </a>
     </li>
    </ul>
    </body>
    </html>
    CSS
    Code:
    ul {
    	position:relative;
    	top:100px;
    }
    
    li {
     position:  relative;;
     top:0px;	
     z-index:1;
      list-style:none;
     float:left;
         } 
    img {
    	border:0;
    }
    .hourglasses {
     position:absolute;
     border:0;
       z-index:2;
     left:0px;
     top:-30px;
     }
    JavaScript that does not work:
    Code:
    function showHourglass (interval) { 
    var hourglassVar = this.getElementsByTagName('img')[1];
     hourglassVar.setAttribute("src", "ani-busy.gif");
     setTimeout(function(){ hourglassVar.setAttribute
     ("src", "1By1Trans.gif");}, interval);
    };  
    function showHourglass500ms (){showHourglass(500)};
    window.onload = function () {
    document.getElementById("Faster").onclick=showHourglass500ms;
    };
    JavaScript that does work:
    Code:
    function showHourglass () { 
    var hourglassVar = this.getElementsByTagName('img')[1];
     hourglassVar.setAttribute("src", "ani-busy.gif");
     setTimeout(function(){ hourglassVar.setAttribute
     ("src", "1By1Trans.gif");}, 500);
    };  
    window.onload = function () {
    document.getElementById("Faster").onclick=showHourglass;
    };

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because with the second way the this keyword points to the function instead of to the element.

    The error message Firefox generated is what made me realize the source of your problem.

    Code:
    function showHourglass (el,interval) {
      var hourglassVar = el.getElementsByTagName('img')[1];
      hourglassVar.setAttribute("src", "ani-busy.gif");
      setTimeout(function(){ hourglassVar.setAttribute
      ("src", "1By1Trans.gif");}, interval);
    };  
    function showHourglass500ms (){showHourglass(this,500)};
    window.onload = function () {
      document.getElementById("Faster").onclick=function(){showHourglass(this,500)};
    };
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that answer it indeed solve my problem. I didn't thank you earlier because I thought I was going to have a question with the thank you, however the two below quotes has cleared up any questions I had.

    But there's a slight twist: the onclick property wants to be fed a function reference -- not the string name of a function, but a reference to the function itself. In JavaScript, you can reference a function by its name, without any parentheses. So you might change the function that runs when a button is clicked like this:
    Referencing a function in JavaScript
    JavaScript is a loosely typed language and you can reference just about anything as a variable. So if you declare a function called updatePage(), JavaScript also treats that function name as a variable. In other words, you can reference the function in your code as a variable named updatePage.


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
  •