Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1217

Jan 3rd, 2008

Javascript Function

Expand Post »

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 =)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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";
<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";

Similar Threads

Calling C# function(code behind) from javascript function in ASP.NET
database connection(select ,insert query) within javascript function in JSP
Javascript function to switch Classes??? in JavaScript / DHTML / AJAX
Javascript Function Link in JavaScript / DHTML / AJAX
Javascript Function to reload DOM Element? in JavaScript / DHTML / AJAX

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

Jan 3rd, 2008

Re: Javascript Function

sorry wrong code just fixed it up there:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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";
}
<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

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

Jan 3rd, 2008

Re: Javascript Function

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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";
}
<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

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

Jan 3rd, 2008

Re: Javascript Function

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

temp304

Reputation Points: 31

Solved Threads: 1

Newbie Poster

Offline

5 posts
since Dec 2007

Permalink

Jan 3rd, 2008

Re: Javascript Function

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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";
}
<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

Reputation Points: 22

Solved Threads: 5

Light Poster

Offline

35 posts
since Jan 2008

Permalink

Jan 4th, 2008

Re: Javascript Function

Click to Expand / Collapse Quote originally posted by 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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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";
}
<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. =)

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

Jan 4th, 2008

Re: Javascript Function

No problem. Glad to help!

~ mellamokb

mellamokb

Reputation Points: 22

Solved Threads: 5

Light Poster

Offline

35 posts
since Jan 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Obfuscating email addresses in HTML

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: problems with Spry/Ajax

DaniWeb Message

Cancel Changes

User Name
Password