Dom Level 0 Event Handler

by Susan Delgado

HTML

<div id="box"></div>CLICK BOX
<div id="txt" class="light">
    <p>Click buttons below </p>
<button>Light</button>
<button>Dark</button>
</div>

CSS

#box{
    background-color:blue;
    width:100px;
    height:100px;

}
.light{
    color:black;
    background-color:white;
}
.dark{

    color:white;
    background-color:black;
}

JavaScript

(function () {
    var el = document.getElementById("box"),
        txt = document.getElementById("txt");
    el.onclick = function () {
        this.style.backgroundColor = "red";
    };
    var buttons = document.getElementsByTagName("button");
    for (var i = 0, len = buttons.length; i < len; i = i + 1) {
        buttons[i].onclick = function () {
            var name = this.innerHTML.toLowerCase();
            txt.className = name;

        }
    }

}());