0

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: n/a

2
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by Taywin
0

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.

0

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.

0

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: n/a

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

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: n/a

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.