[Javascript] Trouble with id

[Del Wegener]

Troy and Others;
I sent an earlier reply (which has not appeared) to Peter's suggestion -- the same as you comment Troy.  They fixed my problem.
I do not have a onmouseout handler because the toggle is used to help a student through a math problem
The page comes up with all steps hidden, the student can reveal each step as desired and they remain visible so that in the end the entire problem solution is revealed.  If the student desires, he can then hide all the steps (by mousing over each step) and try again to solve the problem on his own.

Nick, thanks for your explanations.  They help me understand.
In answer to your suggestion to toggle the className 
The page (and other pages) contain many spans with class = "hidden_hint" -- there appearance is controlled with CSS which references that class.
However, a mouseOver should only toggle the one particular hint involved -- the one identified by the id.

If this is not clear, you can view the results by going to
http://www.drdelmath.com/meramec_college_algebra/chapter_summaries/college_algebra_summary_chapter_1.html
and click on an "Examples" menu item at the bottom of some unit -- the one at the end of Equations: Linear Equations in One Variable is where the problem occurred -- but the others also demonstrate what I am doing. 

Thanks to everyone for the help.

Del
  ----- Original Message ----- 
  From: Troy III Ajnej 
  To: [JavaScript List] 
  Sent: Tuesday, June 05, 2007 8:55 AM
  Subject: RE: [Javascript] Trouble with id


  Helo Del,
  this code works as expected on both, IE and FX (strictmode): 
   
  <a href="#" onMouseOver = toggle_visibility('hint4')>
  <img src="../../image/icon_toggle.jpg" width="22" height="22" border="0"></a>
  <span class = "hidden_hint" id=hint4>
   Add -
   <img src="../images/sq_root_7.gif" align="absmiddle">
   to both sidesof the equation.
  </span>
   
  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.visibility != 'visible')
     e.style.visibility = 'visible';
    else
     e.style.visibility = 'hidden'; 
  } 
   
  One thing I don't understand is what's the use of a toggle function if
  there is no "onmouseout" event defined? Since you'll have to mouseover
  twice to toggle it, consider defining the mouseout also:

  <a href="#"onMouseOver = toggle_visibility('hint4') 
  onMouseOut = toggle_visibility('hint4')>
  ...

  Regards
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
                                         Troy III 
                             progressive art enterprise
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




------------------------------------------------------------------------------

  > From: del at delweg.com
  > To: javascript at LaTech.edu
  > Date: Mon, 4 Jun 2007 22:13:51 -0500
  > Subject: [Javascript] Trouble with id
  > 
  > Good Day;
  > 
  > This is the JavaScript function
  > function toggle_visibility(id)
  > {
  > var e = document.getElementById(id);
  > if(e.style.visibility != 'visible')
  > e.style.visibility = 'visible';
  > else
  > e.style.visibility = 'hidden';
  > }
  > 
  > This is the HTML which does the calling
  > <a href="#" onMouseOver = toggle_visibility(104)>
  > <img src="../../image/icon_toggle.jpg" width="22" height="22" 
  > border="0"></a>
  > <span class = "hidden_hint" id=104>
  > Add -<img src="../images/sq_root_7.gif" align="absmiddle"> to both sides
  > of the equation.
  > </span>
  > 
  > This works fine when I use a number for the id.
  > However I would prefer(reasons involve the rest of the page) to use "hint4" 
  > for the ID
  > When I use hint4 with or without quotes, the whole toggle fails.
  > An ALERT inserted in the function returns object for id when I use hint4
  > and returns the number when I use a number.
  > 
  > I do not understand.
  > Can someone explain what goes wrong when I use id = hint4 ?
  > 
  > Thanks for any help.
  > 
  > Del
  > 
  > 
  > _______________________________________________
  > Javascript mailing list
  > Javascript at LaTech.edu
  > https://lists.LaTech.edu/mailman/listinfo/javascript



------------------------------------------------------------------------------
  Play free games, earn tickets, get cool prizes! Join Live Search Club.   Join Live Search Club! 


------------------------------------------------------------------------------


  _______________________________________________
  Javascript mailing list
  Javascript at LaTech.edu
  https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070605/b9f3fd90/attachment.htm>