Javascript not affecting HTML element

Question

Here's a simple webpage. Why doesn't the textarea's width change when the browser is resized?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function resize() {
        document.getElementById("main").style.width=window.innerWidth;
    }
    window.onresize = resize;
    window.onload = resize;
</script>
</head>
<body style="margin:0; padding:0;">
<textarea id="main" style="margin:0; padding:0; border:0;" >It was a dark and stormy night, and the rain came pouring down... </textarea>
</body>
</html>

@Phil The OP is running it onload...How is it not there? If only we could downvote comments. — epascarello
– epascarello, Commented Dec 11, 2013 at 2:20
Thanks to everyone who chimed in with the right answer. I'm a little rusty with this stuff. — WhiteHotLoveTiger
– WhiteHotLoveTiger, Commented Dec 11, 2013 at 2:28

Blue Skies · Accepted Answer · 2013-12-11 02:22:15Z

2

The style.width requires a unit to be set, like px.

document.getElementById("main").style.width=window.innerWidth + "px";

answered Dec 11, 2013 at 2:22

Blue Skies

2,99520 silver badges19 bronze badges

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

Comments

Ringo · Accepted Answer · 2013-12-11 02:22:39Z

1

Try this:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="margin:0; padding:0;">
<textarea id="main" style="margin:0; padding:0; border:0;" >It was a dark and stormy night, and the rain came pouring down... </textarea>
<script type="text/javascript">
    function resize() {
        document.getElementById("main").style.width=window.innerWidth + 'px';
    }
    window.onresize = resize;
    window.onload = resize;
</script>
</body>
</html>

answered Dec 11, 2013 at 2:22

Ringo

3,9973 gold badges26 silver badges39 bronze badges

5 Comments

Travesty3 Over a year ago

How would this fix the problem?

Travesty3 Over a year ago

Ok, I retracted my downvote, but why move the script below the textarea? As stated in the comments under the question, it's running at window.onload and window.onresize. The element exists when the function executes. True, this won't hurt anything, but there should be a reason for suggesting to do this.

Ringo Over a year ago

@Travesty3 This is my habit when I use javascript to make sure my code will always run even if not 'onload'. I think it's good to change.

jasonscript Over a year ago

I think instead of just adding a block of code as your answer, it would be helpful to include why it solves the problem

Ringo Over a year ago

Sorry about that. But I'm not really good at English. I'm Vietnamese :D. I will try so hard, thanks for remind.

ZenMaster · Accepted Answer · 2013-12-11 02:22:41Z

1

Replace your line to this:

document.getElementById("main").style.width=window.innerWidth + 'px';

answered Dec 11, 2013 at 2:22

ZenMaster

12.8k5 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

Javascript not affecting HTML element

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related