CODEWITHSUNDEEP
javascriptif-statement
user3518221
user3518221

Reputation: 97

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';
}

Upvotes: 2

Views: 95

Answers (3)

Terry Wei
Terry Wei

Reputation: 1531

Here's a simple improvement example. 

moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';

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

Update

Because forEach is not supported in earlier version browser, change Mark Meyer's answer to simple JavaScript as below:

const buttons = {
    impact_overall: 'moveIt_overall2',
    impact_customer: 'moveIt_customer',
    impact_staff: 'moveIt_staff',
    impact_strategic: 'moveIt_strategic'
}

for(var key in buttons)
{
    // if key equals currentImpactState
    // then set className as btn-on
    // else set to 'btn'
    document.getElementById(buttons[key]).className = (currentImpactState == key)? 'btn-on' : 'btn';
}

Upvotes: 2

Mark
Mark

Reputation: 92440

You are essentially mapping your currentImpactState to an ID in your DOM. You can explicitly make this map and then use it to find the object you want to change. 

const buttons = {
    impact_overall: 'moveIt_overall2',
    impact_customer: 'moveIt_customer',
    impact_staff: 'moveIt_staff',
    impact_strategic: 'moveIt_strategic'
}

// change everything
Object.values(buttons).forEach(id => document.getElementById(id).className = 'btn' )
// change the item currentImpactState indicates
document.getElementById(buttons[currentImpactState]).className = 'btn-on'

Upvotes: 5

CertainPerformance
CertainPerformance

Reputation: 370759

Extract the second part of the currentImpactState string, and then iterate over an array of the IDs, checking whether the ID includes the substring or not. If it does, set to btn-on, else set to btn:

const substr = currentImpactState.slice(7);
['moveIt_overall2', 'moveIt_customer', 'moveIt_staff', 'moveIt_strategic'].forEach(id => {
  const element = document.getElementById(id);
  element.className = id.includes(substr)
    ? 'btn-on'
    : 'btn';
});

Upvotes: 2

Related Questions