JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		    <button id="g" type="button" class="btn btn-default btn-lg">G</button>
		    <button id="c" type="button" class="btn btn-default btn-lg">C</button>
		    <button id="e" type="button" class="btn btn-default btn-lg">E</button>
		    <button id="a" type="button" class="btn btn-default btn-lg">A</button>

JavaScript

function radioButton() {
    console.log(this.id);
    var el = document.getElementsByClassName("active");
    for (var i = 0; i < el.length; i++) {
	console.log (el[i]);
	el[i].classList.remove('active','btn-primary');
	console.log (el[i]);
	el[i].classList.add('btn-default');
	console.log (el[i]);
    }
    
    this.classList.add("active", "btn-primary");
}

this.addEventListener('DOMContentLoaded', function () {
    this.getElementById("g").addEventListener("click", radioButton);
    this.getElementById("c").addEventListener("click", radioButton);
    this.getElementById("e").addEventListener("click", radioButton);
    this.getElementById("a").addEventListener("click", radioButton);    
}, true);