Program not running in order

samz · 10-27-2011, 02:01 PM

i noticed the majority of the time when i practice coding javascript and run it, it never runs in the order i want it to. WHY?!

like for example, if i want something to happen ONLY WHEN A BUTTON IS CLICKED, it would instead happen on page load :S
its soooo frustrating

heres one of my practice code which illustrates this problem.
This code is suppose the stretch a div only wen it is clicked on.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>

<body>
    <div id="mybutton" style="height:50px; width:50px; background-color:#C00;"></div>
</body>
<script type="text/javascript">
	var left = 0;

	
var funct = function () {
	//alert("Thank you for clicking me");
	left +=10;
	b.style.height = left + 'px';
	if(left < 100) {
		var id = setTimeout(funct, 10);
	}
}

	var b = document.getElementById("mybutton");
	b.onclick = funct();
</script>
</html>

mrhoo · 10-27-2011, 02:54 PM

b.onclick = funct()

When you include the parens () the function is called immediately,
and onclick is assigned the return value of the function.

funct does not return any value, so future clicks do nothing.

try b.onclick = funct;

Now the funct will be called only when the button is clicked

samz · 10-27-2011, 03:23 PM

omg i love you so much!!!!!