Javascript not changing element attribute

Question

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");

Are you by any chance trying to change this HTML5 attribute in an older version of IE (or in quirks mode)? — scunliffe
– scunliffe, Commented Apr 15, 2014 at 18:54

Oriol · Accepted Answer · 2014-04-15 19:02:06Z

3

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;

edited Apr 15, 2014 at 19:02

answered Apr 15, 2014 at 18:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Talha Tanveer Over a year ago

Thanks a lot for this simple solution, it works, but it messed up my CSS styling :S

DerStrom8 · Accepted Answer · 2014-04-15 18:57:06Z

1

Personally I would use this instead:

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

or to hide it:

panel.style.display = 'none';

answered Apr 15, 2014 at 18:57

DerStrom8

1,3413 gold badges24 silver badges46 bronze badges

2 Comments

scunliffe Over a year ago

This is much cleaner and backwards compatible. There have been issues when using both the hidden attribute and display to determine true visibility of items (I recall a WebDriver bug specifically back in August 2013)

Oriol Over a year ago

hidden attribute is semantic. display:none is presentational. The spec explains the differences.

Collectives™ on Stack Overflow

Javascript not changing element attribute

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related