[thelist] How to abstract this script?

[Matt Warden]

On Wed, 9 Mar 2005 06:58:49 -0800 (PST), Tom Dell'Aringa
<pixelmech at yahoo.com> wrote:
> Here is the HTML with the function call:
> 
> <h3>Choose a Date</h3>
> <form name="service">
> <input type="text" name="serviceDate" id="serviceDate" /> <a href="error.html"
> onclick="ShowCalendar(document.forms['service'].elements['serviceDate'].value); return false;">
> <img src="calendar-icon.gif" alt="" border="0" /></a> <div id="calendar"></div>
> </form>
> 
> I'm using the typical calendar icon to the right of the input box. I'd like to be able to pass
> ShowCalendar() an object reference instead of a hard coded ref. Problem is the image and the input
> box aren't related.

Yes, well that's your problem. You need to make them related.

I would suggest a DOM approach. Maybe something like this:

<h3>Choose a Date</h3>
<form name="service">
<div>
<input type="text" name="serviceDate" id="serviceDate" /> <a href="error.html"
onclick="ShowCalendar(document.forms['service'].elements['serviceDate'].value);
return false;">
<img src="calendar-icon.gif" alt="" border="0" /></a> <div id="calendar"></div>
</div>
</form>

I would do ShowCalendar(this.parentNode) and then modify ShowCalendar
to do a passedNode.getElementsByTagName('input'), etc. It would also
allow you to more easily convert your script in the future to (as
Chris would say) unobtrusive JavaScript, rather than putting the call
directly into your markup, regardless of whether JS is on.


-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.