create clickable buttons from array

by Jeremy Bolanos

HTML

<div id="kpi-container"></div>
<div id="selected-kpi"></div>

CSS

*:before, *:after { box-sizing: border-box; }

button::-moz-focus-inner { border: 0; }

#kpi-container button {
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin: 2px;
    background-image: linear-gradient(rgba(180, 180, 180, 0.2), rgba(180, 180, 180, 0.4));
    cursor: pointer;
}

JavaScript

var arrayKPI = ["ACPD #", "ACPD %", "iBBRE #", "iBBRE %", "TBBO BBA #", "TBBO BBA %", "eHRPD Connection #", "eHRPD Connection %", "DC #", "DC %", "FCA #", "FCA %", "PDSN #", "PDSN %", "Good #", "Good %", "Connection #", "Connection %"];

function populateKPI() {
    $.each(arrayKPI, function (i, v) {
        var btn = document.createElement('button');
        var content = document.createTextNode(v);
        btn.appendChild(content);
        $('#kpi-container').append(btn);
        btn.onclick = function () {
            if(this.style.color === 'green'){
                this.style.color = 'black';
            }else{
                this.style.color = "green";
            }
        };
    });
}

populateKPI();