JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="wrapper">
    <div class="container">
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
        <p class="selectable">Lorem ipsum</p>
    </div>
</div>

CSS

.selected {
    color: blue;
}

JavaScript

/*
var f = function(e) {
	var t = e.target;
	var el = document.querySelectorAll('.selectable');
    for (var i = 0; i < el.length; i++) {
		el[i].classList.remove('selected');
		t.classList.toggle('selected');
	}
}
document.addEventListener('click', f, false);
*/




var f = function(e) {
	var t = e.target;
	var el = document.querySelectorAll('.selectable');
    for (var i = 0; i < el.length; i++) {
		el[i].classList.remove('selected');
		t.classList.toggle('selected');
	}
}
document.addEventListener('click', f, false);




/*
var f = function(e) {
	var t = e.target;
	var el = document.querySelectorAll('.selectable');
	var i = array.length;
    while (i--) {
		el[i].classList.remove('selected');
		t.classList.toggle('selected');
	}
}
document.addEventListener('click', f, false);
*/