CODEWITHSUNDEEP
javascripthtmlcss
sc8ing
sc8ing

Reputation: 399

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

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.

Upvotes: 1

Views: 469

Answers (4)

OACDesigns
OACDesigns

Reputation: 2299

  1. Firstly You need to append the element

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

  2. 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/

Upvotes: 3

user650230
user650230

Reputation:

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

Upvotes: 2

Andrew Leach
Andrew Leach

Reputation: 12973

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.

Upvotes: 2

Simon Forsberg
Simon Forsberg

Reputation: 13331

You need to append the element as well

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

Upvotes: 2

Related Questions