SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Onevent Function Call passed Calculated Arguments

    Here is a small snip-it that I'm using to colour lines of a table as a user rolls over them.

    function colour(){
    var rows = document.getElementsByTagName("tr");

    for(i=0;i<rows.length;i++){
    var defaultColor = rows[i].style.backgroundColor;
    rows[i].onmouseover = change;
    rows[i].onmouseout = function()
    {this.style.backgroundColor=defaultColor;};
    }
    }

    My problem arises on the onmouseout event. Instead of calling an unnamed function, I would rather call a named function outside of 'colour'. However, I'm having much trouble passing arguments and don't know how to do this - or whether I can at all.

    I would like the code to look something like this:

    rows[i].onmouseout = changeBack(defaultColor);

    But I know that this would initiate 'changeBack' right then and there, and it wouldn't have access to defaultColor.

    How do I get around this?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rwbiggs View Post
    rows[i].onmouseout = changeBack(defaultColor);
    rows[i].onmouseout = function() {changeBack(defaultColor)};
    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="^$">

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. I feel slightly stupid, but glad, that the solution was so simple.

    Many thanks felgall

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    rows[i].onmouseout = function() {changeBack(defaultColor)};
    Will that though retain the defaultColor value for each row?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, It does.
    It's working for me.

  6. #6
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I edited the code a bit to look like this:

    rows[i].onmouseout = function() {changeBack(this, defaultColor)}

    function changeBack(object, color){object.style.backgroundColor = color;}

    and it's working.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rwbiggs View Post
    I edited the code a bit to look like this:

    rows[i].onmouseout = function() {changeBack(this, defaultColor)}

    function changeBack(object, color){object.style.backgroundColor = color;}

    and it's working.
    That's good news. When the assigned function is inside the loop, it's tempting to mistakenly believe that the inner contents of the function retain state-based info from outside.

    As a separate function that is invoked with parameters, there is less opportunity for misunderstandings to occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •