[Greasemonkey] Slightly OT: AddEventListener and Forms/keyup/click

Fri Jan 6 01:45:31 EST 2006

This is slightly OT because it's not actually not about Greasemonkey,
but about Javascript in general... or more specifially a page for
http://pageflakes.com/...

On the other hand AddEventListener is a neverending topic on this list
so maybe you can forgive me... I've tried Google, I've banged my head
against various walls, but nothing worked.

The problem is this: I want to attach keyup and click event listener
to various form elements and because this should turn into a generic
Javascript class later I don't want to hardcode it with onclick or
onkeydown (like the original author did). So I'm trying to use
AddEventListener... which just does absolute nothing. I can't even
give you any suggestions except that when I replace the
addeventlistener call
   editFieldInputs[i].addEventHandler("keyup",inputUpdate);
with a dummy call to output the value
   aler(editFieldInputs[i].value);

it works fine, so the object references appear to work..
So here's the code (stripped of anything that hasn't got anything to
do with this).
Pretty please... I really need help on this one:

<!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><title>Google Video</title>

	<script id="googlevideo-pageflake_script" type="text/javascript" >
			function addEventHandler(object,type,func){
				if( object.addEventListener ) { object.addEventListener(type,func,false);}
				else if ( object.attachEvent ) { object.attachEvent("on"+type,func);}
			}

			function removeEventHandler(object,type,func){
				if( object.removeEventListener ) {
object.removeEventListener(type,func,false);}
				else if ( object.detachEvent ) { object.detachEvent("on"+type,func);}
			}

			function inputUpdate(event){alert("OK");}
			function selectUpdate(event){alert("OK");}
			function textareaUpdate(event){alert("OK");}
			function buttonUpdate(event){alert("OK");}

			function prefsTab(){
				var editFieldDiv=document.getElementById('_PAGEFLAKES_edit');

				var editFieldInputs=editFieldDiv.getElementsByTagName("input");
				var editFieldSelects=editFieldDiv.getElementsByTagName("select");
				var editFieldTextareas=editFieldDiv.getElementsByTagName("textarea");
				var editFieldbuttons=editFieldDiv.getElementsByTagName("button");

				for(var i;i<editFieldInputs.length;i++){editFieldInputs[i].addEventHandler("keyup",inputUpdate);}
				for(var i;i<editFieldSelects.length;i++){editFieldSelects[i].addEventHandler("click",selectUpdate);}
				for(var i;i<editFieldTextareas.length;i++){editFieldTextareas[i].addEventHandler("keyup",textareaUpdate);}
				for(var i;i<editFieldbuttons.length;i++){editFieldbuttons[i].addEventHandler("click",buttonUpdate);}
			}
	</script>

</head>
<body onload="new prefsTab();">

	<div id="_PAGEFLAKES_edit" class="edit">
		<table class="EditPanel" cellpadding="2" cellspacing="2">
			<tr>
				<td>Autoplay</td><td><input id="_PAGEFLAKES_doAutoplay"
type="checkbox" value="Autoplay" class="ClassCheckbox" /></td>
			</tr>
			<tr>
				<td>Searchterm</td><td><input id="_PAGEFLAKES_searchterm"
type="text" class="ClassTextfield" /></td>
			</tr>
			<tr>
				<td>Without searchterm</td>
				<td colspan="2">
					<select id="_PAGEFLAKES_wosearchterm" class="ClassChoice">
						<option value="Popular" selected="selected">Popular</option>
						<option value="Random">Random</option>
					</select>
				</td>
			</tr>
			<tr>
				<input id="_PAGEFLAKES_save" type="button" value="Save"
class="ClassButton" /></td>
			</tr>
		</table>
	</div>

</body>
</html>

many thanks in advance
Hans Schmucker