JSFiddle - React, Tailwind, and code Playground

toggle buttons

by Exceeder

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<p>MouseUp example with toggle-able buttons</p>

<div id='lots_of_buttons' data-toggle="buttons">
    <button id='one' type='button' class='btn btn-default'>One</button>
    <button id='two' type='button' class='btn btn-default'>Two</button>
    <button id='three' type='button' class='btn btn-default'>Three</button>
</div>

<div>
    Currently selected items: <span id='notice'></span>
</div>

CSS

#lots_of_buttons {
    border: 1px solid blue;
    padding: 10px;
    margin: 15px;
}

#notice {
    color:red;
}

JavaScript

var container = document.getElementById('lots_of_buttons')
var notice = document.getElementById('notice')


function toggled(){
    //Simple function that returns the ids of all toggled buttons
    result = []
    for(i=0;i<container.children.length;i++){
        if(container.children[i].className.indexOf('active')!=-1){
            result.push(container.children[i].id)
        }
    }    
    return result;
}

//When a button is clicked, the notice will display a list of all the buttons currently toggled
for(i=0;i<container.children.length;i++){
    container.children[i].addEventListener("click", //this still seems too late
            function(){
                setTimeout(function() {
                    notice.innerHTML = toggled().toString(); }, 1);
        })
}

//Problem: When you click "one", nothing happens. Then afterwards if you click "two", it displays "one"