Attempting to change CSS using document.getElementById not working?

Question

I'm attempting to change the CSS of a display:none to a display:block using the following command:

document.getElementById["pop-up"].style.display="block";

The problem is, despite defining the pop-up id in the css (see below), and following other instructions similar to this problem, I've not been able to get it to change.

#pop-up {
    display: none;
}

What am I doing wrong?

document.getElementById("pop-up") . Note the ( & ), but you have used [ & ] — brk
– brk, Commented Jul 25, 2016 at 10:54

Quentin · Accepted Answer · 2016-07-25 10:55:37Z

3

getElementById is a function (not an object where every element with an ID exists as a property).

You need to call it with () and not access properties with []

Make sure you open the Developer Tools in your browser and read the console. It would have told you that document.getElementById["pop-up"] was undefined.

answered Jul 25, 2016 at 10:55

community wiki

Quentin

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

Comments

atoms · Accepted Answer · 2016-07-25 11:01:46Z

2

Try replacing the square brackets with parentheses;

document.getElementById("pop-up").style.display="block";

edited Jul 25, 2016 at 11:01

answered Jul 25, 2016 at 10:55

atoms

3,1032 gold badges25 silver badges46 bronze badges

Collectives™ on Stack Overflow

Attempting to change CSS using document.getElementById not working?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related