JS Switch

by Marventus

HTML

<button id="paint">Paint</button>
<div class="container">
    <h2>Some Article</h2>
</div>
<div class="container">
    <h2>Some Video</h2>
</div>
<div class="container">
    <h2>Some Product</h2>
</div>
<div class="container">
    <h2>Some Article</h2>
</div>
<div class="container">
    <h2>Some Product</h2>
</div>
<div class="container">
    <h2>Some Article</h2>
</div>

CSS

div.container {
    background-color: rgba(0, 0, 0, 0.33);
    float: left;
    height: 150px;
    margin: 2% 2% 0 0;
    width: 25%;
}
button {
    display: block;
    margin-bottom: 1em;
}

div.article {
    height: 75px;
}

h2 {
    font: bold 16px Arial, Helvetica, sans-serif;
    text-align: center;
}

JavaScript

function paintDivs() {
    var containers = document.getElementsByClassName("container"),
        color,
        element,
        heading,
        text;
    for (var i = 0; i < containers.length; i++) {
        element = containers[i];
        heading = element.getElementsByTagName("h2")[0];
        text = heading.innerText || heading.textContent;
        text = text.toLowerCase().replace(/some/g, "").trim();
        switch( text ) {
            case "article":
                color = "rgba(255,0,0, 0.33)";
                break;
            case "product":
                color = "rgba(0,255,0, 0.33)";
                break;
            case "video":
                color = "rgba(0,0,255, 0.33)";
                break;
        }
        element.style.backgroundColor = color;
    }
    var Obj = {"1":"one", "2": "two", "3": "three"};
    console.log(Obj.length);
}

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