How can I make JavaScript code more "clean" [closed]

Question

I have made this functions

let buttonOne = true;
    let buttonTwo = false;
    let buttonThree = false;
    let buttonFour = false;
    let buttonFive = false;

    const handleButtonOne = () => {
        buttonOne = true;
        buttonTwo = false;
        buttonThree = false;
        buttonFour = false;
        buttonFive = false;
    };

    const handleButtonTwo = () => {
        buttonTwo = true;
        buttonOne = false;
        buttonThree = false;
        buttonFour = false;
        buttonFive = false;
    };

    const handleButtonThree = () => {
        buttonTwo = false;
        buttonOne = false;
        buttonThree = true;
        buttonFour = false;
        buttonFive = false;
    };

    const handleButtonFour = () => {
        buttonTwo = false;
        buttonOne = false;
        buttonThree = false;
        buttonFour = true;
        buttonFive = false;
    };

    const handleButtonFive = () => {
        buttonTwo = false;
        buttonOne = false;
        buttonThree = false;
        buttonFour = false;
        buttonFive = true;
    };

This functions are to change the state of the different buttons and show different content to the user when the state of button is true. This works well, however, I thinks it's not the right way to do it.

My question is. How can I do the same with less code and more elegant way? Any tips?

Answer 1

Give each button a name or id, and have something like this, when name === the button name, it's true, otherwise it's false.

let currentButton = 'button1';

handleButtonClick(name) {
    currentButton = name;
}

Answer 2

This is a possible solution:

let buttons = {
  one: true,
  two: false,
  three: false,
  four: false,
  five: false
}
let trueButton = "one"

const handleButton = (key /* eg. "one"*/) => {
    buttons[trueButton] = false
    buttons[key] = true
    trueButton = key
};

Answer 3

You only have 1 item to be true, then it will be easier you put it in paremeter of the function

let num = ["One", "Two", "Three", "Four", "Five"]

function create(trueindex) {
  for (let i in num) {
    if (i == num[trueindex]) {
      window[`button${num[i]}`] = true
    } else {
      window[`button${num[i]}`] = false
    }
  }
}
create(1)
console.log(buttonOne)

Answer 4

If you have only one button with true as value, you could store only the number of the button, which is set (to true).

For switching some indicators iterate the coutn of buttons and set the one which matches to the wanted style and all other to a differen unselected style.

function setButton(event) {
    const targetElement = event.target;
    button = +targetElement.value;
    for (let i = 0; i < 5; i++) 
    document.getElementById(`button${i}`).style.backgroundColor = i === button
        ? '#ff7070'
        : '#dddddd'
}

let button = undefined;

for (let i = 0; i < 5; i++) 
    document.getElementById(`button${i}`).addEventListener('click', setButton, false);

<button id="button0" value="0">one</button>
<button id="button1" value="1">two</button>
<button id="button2" value="2">three</button>
<button id="button3" value="3">four</button>
<button id="button4" value="4">five</button>