Question

function prepareEventHandlers() {
    var sectionButton1 = document.getElementById("sectionButton1");
    var sectionButton2 = document.getElementById("sectionButton2");
    var sectionButton3 = document.getElementById("sectionButton3");
    var sectionButton4 = document.getElementById("sectionButton4");
    var sectionButton5 = document.getElementById("sectionButton5");

    var enabled1 = true;
    var enabled2 = false;
    var enabled3 = false;
    var enabled4 = false;
    var enabled5 = false;


    function checkEnabled() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }

    }

    checkEnabled();
    sectionButton1.onmouseover = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton1.onmouseout = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton2.onmouseover = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton2.onmouseout = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton3.onmouseover = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton3.onmouseout = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton4.onmouseover = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton4.onmouseout = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton5.onmouseover = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton5.onmouseout = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }
    };
}


window.onload = function() {
    prepareEventHandlers();
};

Answer 1

Anytime you find yourself writing variable names like “foo1”, “foo2”, etc, and they all do more or less the same thing, you really need to stop, back up, and declare an array.

function prepareEventHandlers() {
    var sectionButtons = [];
    for (var i = 1; i <= 5; ++i)
      sectionButtons[i] = document.getElementById('sectionButton' + i);

    var enabled = [ true, false, false, false, false ];

    function checkEnabled() {
        for (var i = 1; i <= 5; ++i)
          if (enabled[i]) sectionButtons[i].className = 'sectionButtonEnabled';
    }

    checkEnabled();

    for (i = 1; i <= 5; ++i) {
      sectionButton[i].onmouseover = function(i) {
        return function() {
          if (enabled[i]) sectionButton[i].className = 'sectionButtonOver');
        }
      }(i);
      sectionButton[i].onmouseout = function(i) {
        return function() {
          if (enabled[i]) sectionButton[i].className = 'sectionButtonEnabled';
      }(i);
    }
}


window.onload = function() {
    prepareEventHandlers();
};

Now, two other things:

1. Don’t set the “class” attribute with “setAttribute()”. Instead, manipulate the “className” property of the DOM element.

2. Instead of setting the class directly to those strings, it’s better to construct your own “addClass()” and “removeClass()” functions. Keep in mind that the class can be a list of class names, separated by spaces. Such functions would look something like this:

   function addClass(elem, c) {
     elem.className += ' ' + c;
   }
   
   function removeClass(elem, c) {
     elem.className = elem.className.replace(new RegExp('\\b' + c + '\\b', 'g'), ''));
   }