> > How does one call a straight
JavaScript function that is in the script portion of the web page and
have it fire as if it was called from the page itself?
There is a more elegant way of calling the event handler. Since the
handler are functions, you can call the function directly. This is an
example:
// Call the event handler for the select
form.elements["color" + i].onchange();
"Note, however, that invoking an event handler is not a way to
simulate what happens when the event actually occurs. If we invoke
the onclick method of a Link object, for example, it does not make the
browser follow the link and load a new document." from Javascrip: The
Definitive Guide page 357.
Here is the revised function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<Title>My color test</Title>
<script type="text/javascript">
function processColors(form)
{
var box;
box = document.createElement("p");
document.body.appendChild(box);
box.innerHTML = "<p>Display all <b>three</b> inputs.</p>";
for (var i=1; i<=3; i++)
{
// Here I call the onchange function.
// The commented line directly invokes the underlaying
// function.
// displayOneColor(form,"color"+i);
// Call the event handler for the select
form.elements["color" + i].onchange();
}
return true;
} //end function
function displayOneColor (form,theColor)
{
var colorList = ["green","blue","red","black"];
var boxColor;
var box;
boxColor=form.elements[theColor].value;
box = document.createElement("p");
document.body.appendChild(box);
box.innerHTML =
"<p><span style='color:" + colorList[boxColor] + "';>" +
"You picked color "+ colorList[boxColor] +
" for input " + theColor + "." +
"</span></p>";
}
function validateOnSubmit(form)
{
alert("in validateOnSubmit.");
}
</script>
</HEAD>
<BODY >
<p>This files show how you can call an onchange event
handler directly in the onchange event or indirectly from
another function. The
function displayOneColor is called from each of the onchange
event handler in the select tags. To see the direct call, look in the
for loop
of processColors.</p>
<p>Changing on of the colors in the three select box
will display a message at the bottom of the screen.
Clicking on the GO button will show all three color
selections. Clicking on Submit Query will erase all
the color messages since the file is being reloaded. </p>
<form name="form1"
Pick color 1:
<SELECT name="color1" name=color1 style="WIDTH: 180px"
onchange="displayOneColor(this.form,this.name);">
<OPTION value = "0" >Green
<OPTION value = "1" >Blue
<option value = "2" >Red
<option value = "3" >Black
</OPTION></SELECT>
<br><br>
Pick color 2:
<SELECT name="color2" style="WIDTH: 180px"
onchange="displayOneColor(this.form,this.name);">
<OPTION value = "0" >Green
<OPTION value = "1" >Blue
<option value = "2" >Red
<option value = "3" >Black
</OPTION></SELECT>
<br><br>
Pick color 3:
<SELECT name="color3" style="width: 180px"
onchange="displayOneColor(this.form,this.name);">
<OPTION value = "0" >Green
<OPTION value = "1" >Blue
<option value = "2" >Red
<option value = "3" >Black
</OPTION></SELECT>
<br>
<input TYPE=BUTTON NAME="cmdCalc" VALUE="GO"
onClick="processColors(this.form)">
<br><br>
<input type="submit">
</BODY>
</HTML>
I know the prior poster mentioned this. I thought I was invoking the
event function, but I was invoking my event function not the DOM event
function and I didn't know I could do it this way until today.
Robert
Robert
