JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div id="boxone"></div>
<div id="boxtwo"></div>
<div id="boxthree"></div>

CSS

#boxone {
    position: relative;
    top: 5px;
    left: 5px;
    padding: 0;
    margin: 5px;
    width: 100px;
    height: 100px;
    background: red;
}
#boxtwo {
    position: relative;
    top: 5px;
    left: 5px;
    padding: 0;
    margin: 5px;
    width: 100px;
    height: 100px;
    background: red;
}
#boxthree {
    position: relative;
    top: 5px;
    left: 5px;
    padding: 0;
    margin: 5px;
    width: 100px;
    height: 100px;
    background: red;
}

JavaScript

(function () {
    "use strict";

    var boxone = document.getElementById('boxone'),
        boxtwo = document.getElementById('boxtwo'),
        boxthree = document.getElementById('boxthree');

    boxone.onclick = function () {

        if (boxone.style.background === "blue") {
            boxone.style.background = "red";

        } else {
            boxone.style.background = "blue";
        }

    };

    boxtwo.onclick = function () {

        if (boxtwo.style.background === "green") {
            boxtwo.style.background = "red";

        } else {
            boxtwo.style.background = "green";
        }

    };

    boxthree.onclick = function () {

        if (boxthree.style.background === "blue") {
            boxthree.style.background = "red";

        } else {
            boxthree.style.background = "blue";
        }

    };

})();

(function () {
 "use strict";
    
        var boxone = document.getElementById('boxone').style.background=,
            boxtwo = document.getElementById('boxtwo'),
            boxthree = document.getElementById('boxthree');
    
 
})();