How to get certain buttons on a html file to disappear and reappear-CodePudding

I'm making a text adventure game that delves into certain rooms on a map. I want, upon entering a certain room, for the corresponding button entering that room to disappear, however, it does not seem to work.

Here is my Code:

                   case 'storage_room':
                       room.innerHTML = "<h2>The Storage Room</h2>";
                       nar.innerHTML = "You enter the Storage Room. You're shocked to discover what's in there...Cages upon cages, stacked to the roof."
                       nar.innerHTML  = "And the cages contain...fresh corpses. The smell violates your senses and you feel extremely nauseous."
                       nar.innerHTML  = "<span style = 'color:red'>But there is a safe nearby...You could attempt to open it.</span>"
                       document.getElementById('melt_ice').removeAttribute('hidden');
                       document.getElementById('opening_safe').removeAttribute('hidden')
                       document.getElementById('honors_room').removeAttribute('hidden');
                       document.getElementById('lounge_room').removeAttribute('hidden');
                       document.getElementById('open_safe').removeAttribute('hidden');
                       document.getElementById('storage_room').setAttribute('hidden','hidden');
                       document.getElementById('read_plaque').setAttribute('hidden','hidden')
break;

Please help!

CodePudding user response：

You have to work on style.visibility:

CodePudding user response：

Please follow below example to hide/unhide an element:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Reference:
JavaScript hide/show element