Using JavaScript to change width of div

Question

I'm trying to use JavaScript to change the width of a div, but something's wrong with one part of my code. I think it's this part:

document.getElementById("div").style["width"] = width+"px";

I'm not sure what's wrong with it, so if you know, please let me know. Thanks.

<script>

function adapt (percentage) {

var width = percentage/100;
var width = window.innerWidth*width;

document.getElementById("div").style["width"] = width+"px";

}

adapt(80);

</script>

<style>

div {
border: 1px solid black;
}

</style>

<div id = 'div'> </div>

Works for me jsfiddle.net/ozajqucz

j08691
– j08691

2015-08-11 02:49:45 +00:00
Commented Aug 11, 2015 at 2:49 — j08691
– j08691, Commented Aug 11, 2015 at 2:49
it's working perfectly

Anik Islam Abhi
– Anik Islam Abhi

2015-08-11 02:49:48 +00:00
Commented Aug 11, 2015 at 2:49 — Anik Islam Abhi
– Anik Islam Abhi, Commented Aug 11, 2015 at 2:49
Is your Javascript in the head section of the page?

Purag
– Purag

2015-08-11 02:50:31 +00:00
Commented Aug 11, 2015 at 2:50 — Purag
– Purag, Commented Aug 11, 2015 at 2:50
Can you show us a fiddle? Where is your JavaScript located?

Allan Chua
– Allan Chua

2015-08-11 02:53:49 +00:00
Commented Aug 11, 2015 at 2:53 — Allan Chua
– Allan Chua, Commented Aug 11, 2015 at 2:53
@Purag No. It's not in the head.

ellie
– ellie

2015-08-11 02:54:30 +00:00
Commented Aug 11, 2015 at 2:54 — ellie
– ellie, Commented Aug 11, 2015 at 2:54

Purag · Accepted Answer · 2015-08-11 03:11:23Z

2

Your problem is that your Javascript appears before the element in the code. Browsers process HTML documents top-down, so your Javascript gets executed before there's even an element to act upon.

You can either put the function call inside a window.onload wrapper, or put the <script> tag after the div. Usually, it is placed at the end of the <body> tag since all elements will have been processed by the browser at that point.

edited Aug 11, 2015 at 3:11

answered Aug 11, 2015 at 2:58

Purag

17.1k4 gold badges57 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

Using JavaScript to change width of div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related