11 replies to this topic

[tate]

Hello All,

I am new to javascript programming and have come across a strange situation. Examples will explain my problem better then my english will be able to.

What does work:
javascript code:

var element = "dividname";
function growElement(){
    var h = document.getElementById(element).style.height;
    document.getElementById(element).style.height = h + 20;
}

html code:

<input type="button" value="button" onclick='growElement()' />

What I want to do that does not work:
javascript code:

function growElement(element){
    var h = document.getElementById(element).style.height;
    document.getElementById(element).style.height = h + 20;
}

html code:

<input type="button" value="button" onclick='growElement("dividname")' />

does that make sense? I am unsure why the top one works and the lower one does not. When I debug with google chrome into the javascript, the variable "element" gets passed in correctly as "dividname" yet does not produce the same result when getting the element style information. I feel like I am missing something important but google searches haven't produced any helpful answers yet :( Any help will be greatly appreciated!

[lespauled]

maybe this would work instead of "dividname"?

[tate]

"this" will not work because "dividname" is the id of a div elsewhere in the html document. I only want to edit the style of the div with the id="dividname" if that makes sense.

[lespauled]

ok, this time, I understood that you were accessing another object, and actually debugged it. This works:

function growElement(element){
var div1 = document.getElementById(element);
var h = div1.offsetHeight;
var newheight = h + 20;
div1.style.height = newheight + 'px';
}

[tate]

Ok I think I am asking my question incorrectly and also have some copy paste errors in my code above. My question is why does:

[LEFT][COLOR=#333333]document.getElementById(element).style.height[/COLOR][/LEFT]

return the height string correctly and it looks like "400px" when I create:

var element = "dividname"

in the javascript code but if I pass it in as an argument in the html to the javascript function like:

[LEFT][COLOR=#333333]<input type="button" value="button" onclick='growElement("dividname")' />[/COLOR][/LEFT]

instead of using a variable already made in the javascript, it returns an empty string?

[lespauled]

forgive my ignorance, but i see the px either way. I threw in some alerts to confirm it.

[tate]

no forgive me, i think my bad english is making this hard to explain in a good way to get what I want across as a question. Let me try one more time. I am creating a variable h in each of the scripts, in the first one h gets set to "400px" but in the second one h gets set to "". I am using google chrome to look at the variable after it gets set by placing a breakpoint on it

<script type="text/javascript">
var element = "dividname";
function growElement(){
    var h = [LEFT][COLOR=#333333][FONT=monospace]document.getElementById(element).style.height;
[/FONT][/COLOR][/LEFT]
    //debugging in shows that h in my case is "400px"
}
</script>
[LEFT][COLOR=#333333][FONT=monospace]<input type="button" value="button" onclick='growElement()' />[/FONT][/COLOR][/LEFT]
<div id="dividname"><h2>hello world</h2></div>

and now the one that give me an unexpected variable

<script type="text/javascript">
function growElement(element){
    var h = [LEFT][COLOR=#333333][FONT=monospace]document.getElementById(element).style.height;
[/FONT][/COLOR][/LEFT]
    //debugging in shows that h in my case is "" which is not what I was expecting
}
</script>
[LEFT][COLOR=#333333][FONT=monospace]<input type="button" value="button" onclick='growElement("dividname")' />
[/FONT][/COLOR]<div id="dividname"><h2>hello world</h2></div>[/LEFT]

and my style sheet I am linking to in the html head looks like this:

#dividname {
    height: 400px;
}

Does this help explain better? I am not having problems getting stuff to work, I just want to understand why the second way produces a different result from the first way.

Edited by tate, 10 January 2012 - 11:28 AM.

[lespauled]

First off, both of you javascript tags do not end. you have <script type="text/javascript?>

The best part is that even after fixing the ? issue, I cannot reproduce your findings in chrome. Which is strange.

[tate]

sorry for the javascript tag not ending. its very strange that you cannot reproduce it. Chrome is telling me I have the most up to date version so its not like I can even update to a newer version to fix the issue. Thanks for bearing with me! I will try doing this on my linux box when I get home to see if this is just an issue with the computer I am working on.

[lespauled]

Just for clarification, this is what I came up with that doesn't work:

<html>

<head>

<style type="text/css">

	div {

    height: 400px;

}

</style>

</head>

<body>

<form id="form1">


<script type="text/javascript">

function growElement(element){

    var h = document.getElementById(element).style.height;

	alert( h );

}

function growElement2(){

	var element1 = "dividname";

    var h = document.getElementById(element1).style.height;

	alert( h );

}

</script>

<input type="button" value="button" onclick='growElement("dividname")' />

<input type="button" value="button" onclick='growElement2()' />

<div id="dividname"><h2>hello world</h2></div>

</form>

</body>

</html>

[tate]

I have to thank you again lespauled, your help saved me many many hours of headaches! I got home and tried everything out on chrome on my linuxbox and got the same result you did. Got back on my dev computer this morning and uninstalled and then reinstalled google chrome and am now getting the same results across the board. I am now using the offsetHeight variable instead of the style.height variable to get the height since that actually works on browsers I haven't had a chance to magically break :)

[lespauled]

Anytime. Glad to be of assistance. :thumbup1: