JSFiddle - React, Tailwind, and code Playground

by ktstowell

HTML

<button id="help-button" onclick="halp()">HALP</button>

<ul>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
    <li>Hi</li>
</ul>

CSS

ul li {
    height: 20px;
    display: block;
    border: 1px solid #333;
    cursor: pointer;
}

li.selected {
    background-color: red;
    transition: all .3s ease-in-out;
}

JavaScript

window.halp = function() {
  alert('HALP GLOBAL');
}

var lis = document.querySelectorAll('li');
var className = 'selected';

for(var i=0; i<lis.length; i++) {
    lis[i].addEventListener('click', select, false);   
}

function select(evt) {
    var element = evt.target;

    element.classList.add(className);
        
    for(var i=0; i<lis.length; i++) {
        if(lis[i].classList.contains(className) 
          && lis[i] != element) {
            lis[i].classList.remove(className);
        }
    }
}