Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by msdsmd sm,dfsadf
msdsmd sm,dfsadf
1,124 Points

These are just three line of JS code and very simple to read.

<!DOCTYPE html>
<html>
<body>

<div style="background:red;"></div>
<script>
 let num = 200
 const div = document.querySelector('div')
div.style.width = div.style.height = `${num}px`
</script>

</body>
</html>
/*
Can someone  tell me why the div is square, I think it should
 be empty div because I only set the width, not the height.
*/
Cameron Conway
.a{fill-rule:evenodd;}techdegree seal-36
Cameron Conway
Full Stack JavaScript Techdegree Graduate 22,907 Points

'div.style.width' is equal to 'div.style.height' which is equal to ${num}px

So div.style.width and div.style.height share the same value.

Hope that helps.

msdsmd sm,dfsadf
msdsmd sm,dfsadf
1,124 Points

Thank you so much. That was very helpful.

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

You are setting both the width and height at the same time though.

When you do:

div.style.width = div.style.height = `${num}px`

What you are actually writing is:

div.style.height = `${num}px`;
div.style.width = div.style.height;

That's how JavaScript interprets that code.