addevent problem

kallywag · Oct 26, 2006

I'm having a problem with a basic addevent() javascript implementation. I basically want to find all <input> tags and add 'onfocus' events to them that will clear their 'value' attributes. I created a test page that gives me an "inputs has no properties" error when it gets to the addevent function, but I can access the properties of 'inputs' with any other command. What am I missing here?

Test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">

function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}

function addfocusclear () {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
alert(inputs.value);
addEvent(inputs, "focus", function() {inputs.value = '';}, false);
}
}

</script>
</head>

<body onload="addfocusclear();">
<input value="sampletext1" type="text" />
<input value="sampletext2" type="text" />

</body>
</html>

Thanks, Erik

BabyJeffy · Oct 26, 2006

Well, the problem was this line:

Code:

addEvent(inputs[i], "focus", function() {[!]this.value[/!] = '';}, false);

You need to watch scope when you use anonymous functions like that. Some of the frameworks (prototype, dojo) that I have used allow you to bind the scope of "this", but the solution above will work fine for you.

Here is another way to do the same task...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<script type="text/javascript">
function initPage() {
	var inputs = document.getElementsByTagName('input');
	for (var loop=0, max=inputs.length; loop<max; loop++) {
		inputs[loop].onfocus = function() { this.value=""; };
	}
}
window.onload = initPage;
</script>
</head>
<body>
<form action="" onsubmit="return false">
	<fieldset>
		<input value="sampletext1" type="text" />
		<input value="sampletext2" type="text" />
	</fieldset>
</form>
</body>
</html>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

kallywag · Oct 26, 2006

Hey thanks a lot. So if I understand this right, the inputs array couldn't reach within the scope of the anonymous function? I would have had to pass that array as a variable to function for it to access the array's properties?

Anyway, your second solution is much more concise and logical. Thanks!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

addevent problem

kallywag

Technical User

BabyJeffy

Programmer

kallywag

Technical User

Similar threads

Part and Inventory Search

Sponsor