JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul class="lol">
    <li class="xol">list item 1</li>
    <li class="xol">list item 2</li>
    <li class="xol">list item 3</li>
    <li class="xol">list item 4</li>
</ul>

CSS

.red{
    background-color: red;
}

.lightblue{background-color: lightblue;}

JavaScript

var lol = document.getElementsByClassName('lol')[0];
var xol = document.getElementsByClassName('xol');

function set_class(classy, classy2) {
    function wazywhat() {
        if(this.getAttribute('class') === classy) {
            this.setAttribute('class', classy+" "+classy2);
        } else {
            this.setAttribute('class', classy);
        }
    }
    return wazywhat;
} 


lol.onclick = set_class('lol','lightblue')

for(var i = 0; i< xol.length; i+=1){
    xol[i].onclick = set_class('xol','red');
}