How to simplify JavaScript/React

Question

I want to simplify the following code:
(As you can see I have a lot of document.getElementById)

clickText() {
  document.getElementById("choiceInput").style.display = "none";
  document.getElementById("dateInput").style.display = "none";
  document.getElementById("textInput").style.display = "block";
  document.getElementById('buttonFont').classList.remove('buttonUnselectAfterClick');
  document.getElementById('buttonFont').classList.add('buttonSelectAfterClick');
  document.getElementById('buttonCalendar').classList.remove('buttonSelectAfterClick');
  document.getElementById('buttonCalendar').classList.add('buttonUnselectAfterClick');
  document.getElementById('buttonBoolean').classList.remove('buttonSelectAfterClick');
  document.getElementById('buttonBoolean').classList.add('buttonUnselectAfterClick');
}

Also, I'm using reactjs.

@BhojendraRauniyar I can't, I need to have distinct elements — Alessio Cammarata
– Alessio Cammarata, Commented Sep 25, 2018 at 7:13
Create a helper function and call it like addClassToElement('buttonFont', 'buttonUnselectAfterClick'). — domready
– domready, Commented Sep 25, 2018 at 7:20
@Alessio you need to learn a bit more about react as what you are asking can be solved an elegant "react" way — Maor Refaeli
– Maor Refaeli, Commented Sep 25, 2018 at 7:27

MattYao · Accepted Answer · 2018-09-25 07:45:19Z

2

You can use Map, Set and for...of loop to simplify the code a little bit by grouping them, and no library and framework is needed:

const displayList = new Map([['choiceInput', 'none'], ['dateInput', 'none'], ['textInput', 'block']]);
const eventList = new Set(['buttonFont', 'buttonCalendar', 'buttonBoolean']);

clickText() {
  // For display attr
  for([key, val] of displayList) {
     document.getElementById(key).style.display = val;
  }

  // For events
  for(item of eventList) {
   document.getElementById(item).classList.remove('buttonUnselectAfterClick');
document.getElementById(item).classList.add('buttonUnselectAfterClick');
  }
}

edited Sep 25, 2018 at 7:45

answered Sep 25, 2018 at 7:34

MattYao

2,55518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

segu Over a year ago

You should wrap into methods for a cleaner solution. But it's a good option

MattYao Over a year ago

@segu Thanks! I have wrapped it into the same function.

Drag13 Over a year ago

Good solution, but you should extract creating Map and Set out form the click. You don't need to create this list every time button clicked

Collectives™ on Stack Overflow

How to simplify JavaScript/React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related