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

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.

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.

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.

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

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.

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

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

Thank you for help

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.