CODEWITHSUNDEEP
javascripthtmlvisibility
Dave M
Dave M

Reputation: 418

Quirk with changing visibility property in HTML vs JS

I have an issue where if I add a hidden property to a button in the HTML, I cannot make it visible.

<button id="proceed_to_next_question" hidden> Next Question </button>

However, if I remove that hidden property and add the following to my JS file:

document.getElementById("proceed_to_next_question").style.visibility = "hidden";

the following code works without a problem:

document.getElementById("proceed_to_next_question").style.visibility = "visible";

It works fine now, but I want to understand what the issue is with inputting hidden in the HTML file. Can anyone clarify why changing the html rather than the JS causes this problem?

Upvotes: 1

Views: 61

Answers (1)

Quentin
Quentin

Reputation: 943605

As per the specification:

Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.

You are trying to change the visibility but it is the display you need to change if you want to achieve this using CSS.

document.getElementById('show').addEventListener('click', show);
function show(event) {
  document.getElementById('proceed_to_next_question').style.display = "inline";
}
<button id="show">Show other button</button>
<button id="proceed_to_next_question" hidden> Next Question </button>

That said, depending on browsers implementing specific CSS by default isn't a fantastic idea, so you should consider twiddling the attribute instead.

document.getElementById('show').addEventListener('click', show);
function show(event) {
  document.getElementById('proceed_to_next_question').removeAttribute('hidden')
}
<button id="show">Show other button</button>
<button id="proceed_to_next_question" hidden> Next Question </button>

Upvotes: 2

Related Questions