Javascript Function

[OmniX]

Hi Guys, the problem im having is constructing a function that is usable for any submit button if it meets a certain criteria (this case mouseOver). Now orginally I was using the submit button for only one and was working fine but there are three. So I would like to make a javascript function that allows them to change color individually and not all at the same time.

Thanks for the help in advance, Regards X =)

<input value="1" onMouseOver="submitOver()" type="submit" name="input_submit">
<input value="2" onMouseOver="submitOver()" type="submit" name="input_submit">
<input value="3" onMouseOver="submitOver()" type="submit" name="input_submit">
function mouseOver() {
document.getElementById("input_submit").style.color = "#00FF00";

[OmniX]

sorry wrong code just fixed it up there:

<input value="1" onMouseOver="mouseOver()" type="submit" name="input_submit">
<input value="2" onMouseOver="mouseOver()" type="submit" name="input_submit">
<input value="3" onMouseOver="mouseOver()" type="submit" name="input_submit">
function mouseOver() {
document.getElementById("input_submit").style.color = "#00FF00";
}

[OmniX]

Hi Guys, the problem im having is constructing a function that is usable for any submit button if it meets a certain criteria (this case mouseOver). Now orginally I was using the submit button for only one and was working fine but there are three. So I would like to make a javascript function that allows them to change color individually and not all at the same time.

Thanks for the help in advance, Regards X =)

<input value="1" onMouseOver="mouseOver()" type="submit" name="input_submit">
<input value="2" onMouseOver="mouseOver()" type="submit" name="input_submit">
<input value="3" onMouseOver="mouseOver()" type="submit" name="input_submit">
function mouseOver() {
document.getElementById("input_submit").style.color = "#00FF00";
}

[temp304]

the name of input tags must be unique if you want to change color individually and not all at the same time

[mellamokb]

Hi OmniX,

Your code has a few problems. First, you are retrieving the Id, not the name ("document.getElementById"), so the controls will not be found properly. Second, since they all have the same name, the code won't know which one to modify. A better approach is to pass a reference to "this", which means the HTML control that actually called the function:

<input value="1" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
<input value="2" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
<input value="3" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
function mouseOver(theElement) {
  theElement.style.color = "#00FF00";
}

~ mellamokb

[OmniX]

Hi OmniX,

Your code has a few problems. First, you are retrieving the Id, not the name ("document.getElementById"), so the controls will not be found properly. Second, since they all have the same name, the code won't know which one to modify. A better approach is to pass a reference to "this", which means the HTML control that actually called the function:

<input value="1" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
<input value="2" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
<input value="3" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
function mouseOver(theElement) {
  theElement.style.color = "#00FF00";
}

~ mellamokb

mellamokb, this was the concept that I was thinking of but couldnt get it down on paper.
Works perfectly, Thanks. =)

[mellamokb]

No problem. Glad to help!

~ mellamokb