Question

I’m reading DOM Scripting by Jeremy Keith and testing the code in jsLint

1. In the code sample here it i’m getting an error that says “”Don’t make functions within a loop”.
2. When I try to fix it, I seem to be losing the scope of this
3. I need to see an example of how to fix this error.
4. Here is the jsfiddle: http://jsfiddle.net/pkdsleeper/ejvMj/

Thanks In Advance

sleeper

Answer 1

One way to do it is like this where you define local functions outside the loop:

(function highlightRows() {

    "use strict";

    if (!document.getElementById || !document.getElementsByTagName) { return false; }

    function handleMouseOver () {
        this.style.backgroundColor = "crimson";
        this.style.color = "#ffffff";
    }

    function handleMouseOut() {
        this.style.backgroundColor = "transparent";
        this.style.color = "#000000";
    }


    var tbl = document.getElementById("tbl_example"), // get the table
        rows = tbl.getElementsByTagName("tr"), // get all the table rows
        i,
        current_row;

    // loop through rows adding style info to the mouseover/mouseout events
    for (i = 0; i < rows.length; i++) {
        current_row = rows[i];

        // cancel highlight of th row
        if (current_row.parentNode.tagName === "THEAD") { 
            continue;
        }

        current_row.onmouseover = handleMouseOver;
        current_row.onmouseout = handleMouseOut;
    }    
}())

Working in a jsFiddle: http://jsfiddle.net/jfriend00/aKfWs/.