Javascript Function

Please support our JavaScript / DHTML / AJAX advertiser: 50% off 6 Months Dedicated Server Hosting from 1&1!
Thread Solved

•
•
Join Date: Dec 2007
Posts: 646
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Javascript Function

 
0
  #1
Jan 3rd, 2008
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) 
  1. <input value="1" onMouseOver="submitOver()" type="submit" name="input_submit">
  2. <input value="2" onMouseOver="submitOver()" type="submit" name="input_submit">
  3. <input value="3" onMouseOver="submitOver()" type="submit" name="input_submit">
  4. function mouseOver() {
  5. document.getElementById("input_submit").style.color = "#00FF00";
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 646
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Javascript Function

 
0
  #2
Jan 3rd, 2008
sorry wrong code just fixed it up there:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <input value="1" onMouseOver="mouseOver()" type="submit" name="input_submit">
  2. <input value="2" onMouseOver="mouseOver()" type="submit" name="input_submit">
  3. <input value="3" onMouseOver="mouseOver()" type="submit" name="input_submit">
  4. function mouseOver() {
  5. document.getElementById("input_submit").style.color = "#00FF00";
  6. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 646
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Javascript Function

 
0
  #3
Jan 3rd, 2008
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) 
  1. <input value="1" onMouseOver="mouseOver()" type="submit" name="input_submit">
  2. <input value="2" onMouseOver="mouseOver()" type="submit" name="input_submit">
  3. <input value="3" onMouseOver="mouseOver()" type="submit" name="input_submit">
  4. function mouseOver() {
  5. document.getElementById("input_submit").style.color = "#00FF00";
  6. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 5
Reputation: temp304 is an unknown quantity at this point 
Solved Threads: 1
temp304's Avatar
temp304 temp304 is offline Offline
Newbie Poster

Re: Javascript Function

 
1
  #4
Jan 3rd, 2008
the name of input tags must be unique if you want to change color individually and not all at the same time
www.JavaScriptBank.com - 2.000+ free JavaScripts
Start hosting from: $22/year | With promo code: 97USDD | At DreamHost
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 35
Reputation: mellamokb is an unknown quantity at this point 
Solved Threads: 5
mellamokb mellamokb is offline Offline
Light Poster

Re: Javascript Function

 
0
  #5
Jan 3rd, 2008
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) 
  1. <input value="1" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  2. <input value="2" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  3. <input value="3" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  4. function mouseOver(theElement) {
  5.   theElement.style.color = "#00FF00";
  6. }

~ mellamokb
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 646
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: Javascript Function

 
0
  #6
Jan 3rd, 2008
•
•
•
•
Originally Posted by mellamokb View Post
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) 
  1. <input value="1" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  2. <input value="2" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  3. <input value="3" onMouseOver="mouseOver(this)" type="submit" name="input_submit">
  4. function mouseOver(theElement) {
  5.   theElement.style.color = "#00FF00";
  6. }

~ mellamokb
mellamokb, this was the concept that I was thinking of but couldnt get it down on paper.
Works perfectly, Thanks. =)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 35
Reputation: mellamokb is an unknown quantity at this point 
Solved Threads: 5
mellamokb mellamokb is offline Offline
Light Poster

Re: Javascript Function

 
1
  #7
Jan 3rd, 2008
No problem. Glad to help!

~ mellamokb
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 1109 | Replies: 6
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
8 ad ajax ajaxcode ajaxhelp ajaxjspservlets animate api array asp asp.net autocomplete autoplay box boxes bug captchaformproblem catch code content cookies css date db dependent design display div dom dynamic element embed error eventhandlers events explorer ext file firefox firehose flash focus font form function google gxt hide html ie7 iframe image image() internet internet-explorer java javascript javascripts jquery js libcurl lists load maps matrixcaptcha media modal mysql objects onclick onmouseover parameters paypal php player position post resize reveal script scroll search select show simple size smarty sources sqlite text textbox toggle twitter unicode upload variables web webkit window xml
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2010 DaniWeb® LLC