0

a project that I'm working on for school has me stumped. I'm making a chrome extension, and in the pop up, four buttons are supposed to appear. When one button is pressed, this leads to the old buttons being removed and new ones appearing. It is supposed to work kind of like a flow chart. The problem is that I can't figure out how to get new buttons to appear after the old ones become hidden. I am new to coding so any help is greatly appreciated!!! :)

<div class ="modal-buttons"> 
  
<button class="button1-1" id="button1-1" type="button">
    Comparison
</button>

<button class="button1-2" id="button1-2" type="button">
    Relationship
</button>

<button class="button1-3" id="button1-3" type="button">
    Distribution
</button>

<button class="button1-4" id="button1-4" type="button">
    Composition
</button>

</div>


<script>
    const myBtn1 = document.getElementById("button1-1");
    const myBtn2 = document.getElementById("button1-2");
    const myBtn3 = document.getElementById("button1-3");
    const myBtn4 = document.getElementById("button1-4");

    myBtn1.addEventListener("click", function(firstClick) {
        myBtn1.style.visibility = "hidden";
        myBtn2.style.visibility = "hidden";
        myBtn3.style.visibility = "hidden";
        myBtn4.style.visibility = "hidden";

        
        
    });
    
</script>

1
  • we don't do homework here at SO
    – rioV8
    Feb 23, 2022 at 19:49

1 Answer 1

0

In your function, you set all four buttons to "hidden." You should have the visibility set to hidden on buttons 2, 3, and 4 from the start, and set them to "visible" within the function.

I also cleaned up your CSS classes; classes are a reusable rule for how elements should be styled. Since you only have two styling rules, you don't need to have separate classes for buttons 2, 3, and 4. IDs still need to be unique though.


    <style>
      .button2 {
        visibility: hidden;
      }
    </style>
    
    <div class ="modal-buttons"> 
      
    <button class="button1" id="button-1" type="button">
        Comparison
    </button>
    
    <button class="button2" id="button-2" type="button">
        Relationship
    </button>
    
    <button class="button2" id="button-3" type="button">
        Distribution
    </button>
    
    <button class="button2" id="button-4" type="button">
        Composition
    </button>
    
    </div>
    
    <script>
        const myBtn1 = document.getElementById("button-1");
        const myBtn2 = document.getElementById("button-2");
        const myBtn3 = document.getElementById("button-3");
        const myBtn4 = document.getElementById("button-4");
    
        myBtn1.addEventListener("click", function(firstClick) {
            myBtn1.style.visibility = "hidden";
            myBtn2.style.visibility = "visible";
            myBtn3.style.visibility = "visible";
            myBtn4.style.visibility = "visible";
            
        });
        
    </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.