Member Avatar for Amr87

Hello Everyone;

I`m Beginner Javascript Developer and I Have a small problem with parseInt method

the code is below:

<script type="text/javascript">
window.onload = Rectangle;
function Rectangle () {

var e = document.getElementById('Rectanglee');
var w =parseInt(e.style.width);
var h =parseInt(e.style.height); 
alert (w);
alert (h);
}

</script>

the code is supposed to alert the actual width and the height of the element with specified id according to its CSS rule , however a NaN alert is popup

can you plz tell me where could be the problem???

thank you in advance :)

Edited by Amr87 because: n/a
  • 2 Contributors
  • 9 Replies
  • 143 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 9 Replies

Member Avatar for Taywin

1)Are you sure that your 'e' variable is defined? I mean, the ID 'Rectanglee' must exists in your page.
2)Do you specify style attribute of width & height to 'Rectanglee' element? If you don't, the parseInt(null) will return NaN.

Member Avatar for Amr87

Yes I`m sure that I assigned the variable 'e' properly and the Element with ID 'Rectanglee' already exists
also I specified a width and height for that Element in the stylesheet.

Member Avatar for Taywin

Could you show me the whole part of your style sheet for the element and the HTML part of the element? The reason NaN is returned is because the value going into parseInt() function is either a null value or a string started with non number.

Edited by Taywin because: n/a
Member Avatar for Amr87 
<html>
<head>
<title>Hello World!</title>
<style type="text/css">

body{background:#333;}
#Rectanglee {margin:0 auto;
 width: 300px; 
 height: 100px;
 background:#1edf51;}
</style>
<script type="text/javascript">
window.onload = Rectangle;
function Rectangle () {

var e = document.getElementById('Rectanglee');
var w =parseInt(e.style.width);
var h =parseInt(e.style.height); 
alert (w);
alert (h);
}


</script>
</head>
<body>

<div id="Rectanglee">
<p>This Is Rectangle</p>

</div>
<input type="submit" id="submitButton" value="Calculate the Area" />



</body>
</html>
Member Avatar for Taywin

I see. OK, the problem is how you declare CSS. You use '#' means the element with id the same as whatever name after '#' will have these properties; however, the properties values are NOT the element's style and cannot be directly accessed using JavaScript the way you do. If you want to access the property, you need to do it as followed...

<html>
<head>
<title>Hello World!</title>
<style type="text/css">

body{background:#333;}
#Rectanglee {
  margin:0 auto;
  width: 300px;
  height: 100px;
  background:#1edf51;
}
</style>
<script type="text/javascript">
window.onload = Rectangle;
function Rectangle () {

var e = document.getElementById('Rectanglee');
// added this element property value
// this is the way to get the element's style property
var eProps = document.defaultView.getComputedStyle(e, null)
var w =parseInt(eProps["width"]);
var h =parseInt(eProps["height"]);
alert (w);
alert (h);
}


</script>
</head>
<body>

<div id="Rectanglee">
<p>This Is Rectangle</p>

</div>
<input type="submit" id="submitButton" value="Calculate the Area" />



</body>
</html>

If you want to use 'element.style...', you need to declare the 'style' property to the element directly. You cannot obtain the style if you use the CSS this way.

Edited by Taywin because: n/a
Member Avatar for Amr87

I still get that 'NaN' message , do I have to change the DOM method 'getElementById'??

Member Avatar for Taywin

Please reread my post. I have edited it because I was wrong before.

Member Avatar for Amr87

Thank you for help

Member Avatar for Taywin

You are welcome. Please mark as resolved if it is. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.