dimanche 29 juillet 2018

How can I write this else if statement more efficiently?

I have a page with some css custom buttons and I want the selected button to stay highlighted when a user clicks elsewhere on the page. I can get what I want writing an if/else statement to assign a class when a button is selected and a different class if it's not selected but it's long winded, how can I write it to be more efficient?

<input class="btn" id="moveIt_overall2" type="button" value="Overall" onclick="changeImpactState('impact_overall');"/>
    <input class="btn" id="moveIt_customer" type="button" value="Customer" onclick="changeImpactState('impact_customer');" />
    <input class="btn" id="moveIt_staff" type="button" value="Staff" onclick="changeImpactState('impact_staff');" />
    <input class="btn" id="moveIt_strategic" type="button" value="Strategic" onclick="changeImpactState('impact_strategic');" />

var moveItOverall = document.getElementById('moveIt_overall2');
var moveItCustomer = document.getElementById('moveIt_customer');
var moveItStaff = document.getElementById('moveIt_staff');
var moveItStrategic = document.getElementById('moveIt_strategic');

if(currentImpactState == 'impact_overall'){
        moveItOverall.className = 'btn-on';
        moveItCustomer.className = 'btn';
        moveItStaff.className = 'btn';
        moveItStrategic.className = 'btn';
    }else if(currentImpactState == 'impact_customer'){
        moveItOverall.className = 'btn';
        moveItCustomer.className = 'btn-on';
        moveItStaff.className = 'btn';
        moveItStrategic.className = 'btn';
    }else if(currentImpactState == 'impact_staff'){
        moveItOverall.className = 'btn';
        moveItCustomer.className = 'btn';
        moveItStaff.className = 'btn-on';
        moveItStrategic.className = 'btn';
    }else if(currentImpactState == 'impact_strategic'){
        moveItOverall.className = 'btn';
        moveItCustomer.className = 'btn';
        moveItStaff.className = 'btn';
        moveItStrategic.className = 'btn-on';
    }

Aucun commentaire:

Enregistrer un commentaire