CODEWITHSUNDEEP
javascripthtml
Talha Tanveer
Talha Tanveer

Reputation: 1256

Javascript not changing element attribute

I am trying to change the attribute "hidden" of the element to true by javascript after a timeout of 1,000 millisecond but it is not changing the attribute. Yes the timeout is working fine I've tested that, all functions are correct! Only the last part in which by using the setAttribute() function is not working.

HTML:

<div id="gamePanel" hidden="true">
    <div id="bb">
        <div id="map">

        </div>
    </div>
    <p id="status"> Welcome Back! </p>
    <input type="button" id="changeBio" value="Change Map" />
    <input type="button" id="saveGame" value="Save Game" />
    <div id="statusBar"> Status </div>
</div>

Javascript:

var panel = document.querySelector("#gamePanel");
panel.setAttribute("hidden","false");

Upvotes: 0

Views: 875

Answers (2)

Oriol
Oriol

Reputation: 288100

Use

panel.removeAttribute("hidden");

Since hidden attribute is a boolean attribute, (the spec defines it this way),

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Then, it doesn't have true and false values. It can be present (that is, hidden or hidden="hidden"), or not.

Or, even better, you can change the hidden property:

panel.hidden = false;

Upvotes: 3

DerStrom8
DerStrom8

Reputation: 1341

Personally I would use this instead:

var panel = document.getElementById("gamePanel");
panel.style.display = 'block';

or to hide it:

panel.style.display = 'none';

Upvotes: 1

Related Questions