1

how to make the code below more simple and short

html :

<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" onclick="myFunction1()">1</label>
    <label id="point-2" for="radio2" class="manual-btn" onclick="myFunction2()">2</label>
    <label id="point-3" for="radio3" class="manual-btn" onclick="myFunction3()">3</label>
    <label id="point-4" for="radio4" class="manual-btn" onclick="myFunction4()">4</label>
  </div>

I made 4 buttons which if button 1 is clicked the background will change color to white, and when button 2 is clicked then button 2 the background will turn white, but button 1's background color returns to its original color, and applies also to other button

Js :

function myFunction1(){
    document.getElementById("point-1").style.background = "white";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-3").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction2(){
    document.getElementById("point-2").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-3").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction3(){
    document.getElementById("point-3").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction4(){
    document.getElementById("point-4").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-3").style.background = "none";
  }
LeviantArt
  • 13
  • 2
  • Use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), change class names, and store the current selection into a variable, something like in [this fiddle](https://jsfiddle.net/yonujc0m/). – Teemu Apr 14 '22 at 06:56

2 Answers2

0

This should work Just replace red with white

const labels = document.querySelectorAll(".manual-btn")

labels.forEach(l => l.addEventListener("click", () => {
  labels.forEach(l => {l.style.background = "none"})
  l.style.background = "red"
}));
<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" >1</label>
    <label id="point-2" for="radio2" class="manual-btn" >2</label>
    <label id="point-3" for="radio3" class="manual-btn" >3</label>
    <label id="point-4" for="radio4" class="manual-btn">4</label>
  </div>
R4ncid
  • 6,944
  • 1
  • 4
  • 18
0

You can try to reset the background on all items first.

function labelClick(selectedId){
    document.querySelectorAll('.manual-btn').forEach(label => {
      label.style.background = "none";
    })
    document.getElementById(selectedId).style.background = "white";
  }
.navigation-manual {
  background-color: gray;
}
<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" onclick="labelClick('point-1')">1</label>
    <label id="point-2" for="radio2" class="manual-btn" onclick="labelClick('point-2')">2</label>
    <label id="point-3" for="radio3" class="manual-btn" onclick="labelClick('point-3')">3</label>
    <label id="point-4" for="radio4" class="manual-btn" onclick="labelClick('point-4')">4</label>
  </div>

Or you can try to listen on an existing radio button change event.

luko
  • 69
  • 4