If, Else if, Else

by Marventus

HTML

<button id="paint">Paint</button>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

CSS

div.container {
    background: rgba(0, 0, 0, 0.33);
    height: 50px;
    margin-top: 1em;
    width: 100%;
}

JavaScript

function paintDivs() {
    var divs = document.getElementsByClassName("container");
    for (var i = 0; i < divs.length; i++) {
        if (i === 0) {
            divs[i].style.backgroundColor = "rgba(255,0,0, 0.33)";
        } else if (i === 1) {
            divs[i].style.backgroundColor = "rgba(0,255,0, 0.33)";
        }/* else {
            divs[i].style.backgroundColor = "rgba(0,0,255, 0.33)";
        }*/
    }
}

document.addEventListener("DOMContentLoaded", function () {
    var btn = document.getElementById("paint");
    btn.addEventListener("click", paintDivs, false);
}, false);