Search code examples
javascriptbuttonshow-hide

I need to make all buttons disappear when one is clicked


Im writing a game of sorts that presents you with multiple options. Once you choose your option, all buttons, including your selection, should disappear and you move on to the next round. I have a script that allows this to be done, however for each round of buttons I would have to rewrite it to adhere to the new set of buttons. To save from having to repeat myself each time, I'm trying to get a universal script that will accomplish this

HTML

<input type="button" class="btn" id="getUp" name="answer" value="get up"  onclick="this.style.display='none'; hideSleepIn(); " />
<input type="button" class="btn" id="sleepIn" name="answer" value="sleep in" onclick="this.style.display='none'; hideGetUp();" />

JavaScript

var hidden = false;
var click = onClick;

function hideSleepIn()
{
    hidden = !hidden;

    if(getUp === click)
    {
        document.getElementById('getUp').style.visibility = 'visible';
    }

    else
    {
        document.getElementById('sleepIn').style.visibility = 'hidden';
    }       
}

Solution

  • I worked the current script I was using to hide the divs, to also hide/ show the buttons on the page

      function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    

    } }

    <input type="button" class="unhidden" id="firstPath" value="get up" onclick="unhide('getUpText'); unhide('firstPath2'); unhide('firstPath');" />
    
    text

     <input type="button" class="unhidden" id="firstPath2" value="sleep in" onclick="unhide('sleepInText'); unhide('firstPath'); unhide('firstPath2');" />
    
    text