Generating new buttons from one with JavaScript

I have written a post about this problem Want buttons be displayed ONLY when clicking on another button with JS and I have not gotten a satisfying answer. I formulate my problem again. I have to find a right JS code to solve this issue. I have a set of buttons (“Backgrounds”, “Ears”, “Hair”, “Eyes”, “Mouth”, “Legs”, “Neck”, “Accessories”). And I want that by clicking on each one of its buttons, to see another group of buttons generated from the trigger button. This means the buttons generated by “Backgrounds” must be different from any other button like “Ears” or “Hair”. So the buttons that should be displayed are from “Backgrounds” only and not from any other one. And if I click on another button like “Accessories”, the buttons for “backgrounds” should disappear and only those for “Accessories” should be displayed. Before, I had tried an If else {} statement. now I want to try a switch {} statement . And this is how I wrote it: So please tell me, in order to fix the issue, what is missing in this code?

function myFunction(id){
  var x = document.getElementById(id);
  switch (x) {
      case id="Backgrounds":
        document.getElementById(id).style.display = "block";
        break;
      case id="Ears":
        document.getElementById(id).style.display = "block";
        break;
      case id="Hair":
        document.getElementById(id).style.display = "block";
        break;
      case id="Eyes":
        document.getElementById(id).style.display = "block";
        break;
      case id="Mouth":
        document.getElementById(id).style.display = "block";
        break;
      case id="Legs":
        document.getElementById(id).style.display = "block";
        break;
      case  id="Neck":
        document.getElementById(id).style.display = "block";
        break;
      case  id="Acessories":
        document.getElementById(id).style.display = "block";
        }
        
     }

Here is how before I have written the code:

/*
function myFunction(id) {
  var x = document.getElementById(id);
  
    if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}  
*/  



<div class="rightDiv">
          
        <button type="button" onclick="myFunction('Backgrounds')" class="rightButton">Backgrounds</button>
        <button type="button" onclick="myFunction('Ears')" class ="rightButton">Ears</button>
        <button type="button" onclick="myFunction('Hair')" class ="rightButton">Hair</button>
        <button type="button" onclick="myFunction('Eyes')" class ="rightButton">Eyes</button>
        <button type="button" onclick="myFunction('Mouth')" class ="rightButton">Mouth</button>
        <button type="button" onclick="myFunction('Legs')" class ="rightButton">Legs</button>
        <button type="button" onclick="myFunction('Neck')" class ="rightButton">Neck</button>
        <button type="button" onclick="myFunction('Accessories')" class ="rightButton">Accessories</button>
        <hr>  
       

        <div id="Backgrounds" ><p class="para">Backgrounds</p>
        <button type="button" class="rightSubButton">Blue50</button>
        <button type="button" class ="rightSubButton">Blue60</button>
        <button type="button" class ="rightSubButton">Blue70</button>
        <button type="button" class ="rightSubButton">Darkblue30</button>
        <button type="button" class ="rightSubButton">Darkblue50</button>
        <button type="button" class ="rightSubButton">Darkblue70</button>
        <button type="button" class="rightSubButton">Green50</button>
        <button type="button" class ="rightSubButton">Green60</button>
        <button type="button" class ="rightSubButton">Green70</button>
        <button type="button" class ="rightSubButton">Grey40</button>
        <button type="button" class ="rightSubButton">Grey70</button>
        <button type="button" class ="rightSubButton">Grey80</button>
        <button type="button" class ="rightSubButton">Red50</button>
        <button type="button" class ="rightSubButton">Red60</button>
        <button type="button" class ="rightSubButton">Red70</button>
        <button type="button" class ="rightSubButton">Yellow50</button>
        <button type="button" class ="rightSubButton">Yellow60</button>
        <button type="button" class ="rightSubButton">Yellow70</button>
      </div>
        <div id="Ears" ><p class="para">Ears</p>
          <button type="button" class="rightSubButton">Default</button>
          <button type="button" class ="rightSubButton">Tilt-backward</button>
          <button type="button" class ="rightSubButton">Tilt-forward</button>
      </div> 



#Backgrounds , #Ears , #Hair , #Eyes , #Legs , #Mouth ,#Neck , #Accessories { 
    display: none; 
  
  }

The goal is to get the “rightSubButtons” displayed when ONLY clicking on each of the previous buttons associated with.

Answer

Your problem is with the switch statement

visiting https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch for more info.

but if you change the x for id your code will work ex:

...
var x = document.getElementById(id);
  console.log(x)//with this console log you will see why you can't use the var x
  switch (id) {
...

Advertisement

Answer