Javascript doesn't show elements with display = "block"

Question

I created a <div> via javascript that has display:hidden; in its css. I want to make it a block element, but it won't appear. Here is my code.

var fatGooseShop = document.createElement('div');
            fatGooseShop.width = canvas.width / 1.5 + "px";
            fatGooseShop.height = canvas.height / 1.5 + "px";
            fatGooseShop.style.position = "absolute";
            fatGooseShop.style.left = "50%";
            fatGooseShop.style.top = "50%";
            fatGooseShop.style.margin = "-" + (canvas.height / 1.5) / 2 + "px 0px 0px -" + (canvas.width / 1.5) / 2 + "px";
            fatGooseShop.style.backgroundColor = "yellow";
            fatGooseShop.style.display = "none";
function shop()
{
    fatGooseShop.style.display = "block";
}

I call the shop() function from the browser to run it, if that makes a difference.

have you defined the Canvas variable further up in the code? — OACDesigns
– OACDesigns, Commented Apr 8, 2012 at 21:14

OACDesigns · Accepted Answer · 2012-04-08 22:05:48Z

3

Firstly You need to append the element

document.getElementById("test").appendChild(fatGooseShop);

There's no content and you're not actually setting the width, or height of the block, so it's not going to be visible. You need to modify your code as follows. Note: This will work, provided canvas.width is returning a non zero value

fatGooseShop.style.width = canvas.width / 1.5 + "px";
fatGooseShop.style.height = canvas.height / 1.5 + "px";

Example Here:

http://jsfiddle.net/DigitalBiscuits/cqbzw/6/

edited Apr 8, 2012 at 22:05

answered Apr 8, 2012 at 21:51

OACDesigns

2,30914 silver badges24 bronze badges

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

Comments

Simon Forsberg · Accepted Answer · 2012-04-08 20:49:30Z

2

You need to append the element as well

x=document.getElementById("something");
x.appendChild(fatGooseShop);

answered Apr 8, 2012 at 20:49

Simon Forsberg

13.4k11 gold badges66 silver badges109 bronze badges

1 Comment

sc8ing Over a year ago

Oh gosh.. I feel like such an idot for forgetting that. I fixed that part now, but when I run the shop() function it still doesn't show.

Andrew Leach · Accepted Answer · 2012-04-08 20:50:52Z

2

You create the element with createElement, but you need to appendChild it to another element in the DOM before it will appear. Once that's done you can manipulate it.

answered Apr 8, 2012 at 20:50

Andrew Leach

13k1 gold badge44 silver badges48 bronze badges

1 Comment

Simon Forsberg Over a year ago

It is possible to manipulate it before appending, but it has no effect until it's appended.

user650230 · Accepted Answer · 2012-04-08 21:05:07Z

2

You forgot to append it to the document. In your JS file add the line line below the //Javascript.

<!--HTML-->
<div id="the-div">

</div>

//Javascript
document.getElementById("the-div").appendChild(fatGooseShop);

answered Apr 8, 2012 at 21:05

user650230

Collectives™ on Stack Overflow

Javascript doesn't show elements with display = "block"

4 Answers 4

Example Here:

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Example Here:

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related