Script My DOM! §

I know in the general scheme of things this isn’t very exciting. But I’m ecstatic about this little bit of JavaScript I just created… It’s super simple, and most certainly tag soup, but I’m still working out the kinks.

The idea is that I wanted a way to hide and show sections of a form for a project I’m working on. So I dove in, and wrote my first JavaScript (without the aid of a book, like DOM Scripting, which I’m currently finishing up).

It’s simple, but please don’t laugh at me… and if you must mock, at least do it in the comments so the world can see! I hate being mocked behind my back…

Here it is, just check and uncheck the boxes and watch the crazy coolness.

Update 2: It’s working in IE on Windows now. That was a pain, since I’ve never done JavaScript before, I had no idea where to start troubleshooting things for IE. At least in CSS and HTML I know most of the quirks and bugs, and which patches to apply to force operation.

Anyway, the page works. Nothing revolutionary by any means. But in the process of troubleshooting, I changed the way the whole thing works, as well as the user interaction, but it’s still basically the same.

Update: Well, as usual, IE shits all over everything. Apparently the whole thing doesn’t even work in IE 6 on Windows. Firefox and Safari users can see how it works. If anything the IE experience at least lets me see that it is degradeable on shit browsers.

I think it’s pretty robust. I’ll step you through what it’s doing:

  1. The Script creates the style element with the ID declarations that set display: none; on the paragraphs so that they are hidden from view. I’m creating the styles in the script so that people with JavaScript deactivated will just see the hidden paragraphs, since the display: none; will never exist.

  2. Next the checkboxes use an onclick attribute to call on the Script to show the paragraph associated with the checkbox. First the script displays the paragraph, then it goes in and changes the onclick attribute to the name of the function that hides the paragraph. That way, when the user unchecks the option, the paragraph will dissapear again.

That’s pretty much it. If you know JavaScript, and wouldn’t mind doing so, please have a look at the script, it’s all in the source of the page. I know that putting the onclick attribute isn’t the best solution, as far as proper markup, so I will edit the script so that those attributes are created dynamically if the user agent has JavaScript enabled.

The next step is to actually build out the forms, and then set it up to send the information to 1, 2 or 3 e-mail recipients, depending on the options that are checked.

Make It a Discussion

twitterPing Me on Twitter

rss feedStay up to Date with the RSS Feed

Find More to Read

2016  |  Bluetooth Headphones Sales Surpass Wired  |  Apple Event Follow-up  |  PSA: Force Quitting Apps Hurts Battery Life  |  Is Trump Losing on Purpose?  |  Uber Launching Self Driving Car Fleet This Month  |  Subscribe to My Newsletter  |  Tim Cook Interview  |  Apple Stores Offering Exclusive Jaybird Freedom Earbuds  |  Apple's Fall 2016 Event

2013  |  The Politics of Design  |  13 Quick Tips for Designers  |  The Considerate Director

2011  |  Steve  |  New York Times Offering In-App Subscriptions, Finally  |  Get Ready for OS X Lion  |  New Habits  |  Rationalizing Microsoft and Skype  |  So, the New York Times Called  |  On MobileMe  |  A Tale of Two Charts  |  Indie iOS Devs Under Legal Fire For Offering In-App Purchases  |  The Amazon Tablet  |  Blogger

2006  |  Vintage  |  Pending  |  Daring  |  Deceased  |  Switch  |  Irony Live  |  Unidentified  |  Google the Platform  |  Guilty...  |  Apple Tidbits  |  Script My DOM!  |  Web 1.1  |  Yoga  |  Macworld 2006  |  2006  |  MSPOS

2005  |  Auld Lang Syne  |  Madonna... or WTF?  |  Podcasting  |  Dear Arnold  |  Front Row  |  Information Insomnia  |  Conversion  |  Podcast Graveyard  |  No Access Memory  |  Podcast Obsessions

2004  |  Culture Shock  |  List of Things That Distract from Studying  |  Please Make Me Think... Revisited  |  Podcast II  |  Podcasting... Some Notes  |  Chronicles of a Mac User in a PC Major: Chapter Two  |  Re: Please Make Me Think! Potential Dangers in Usability Culture  |  Why, Word? Why?  |  Chronicles of a Mac User in a PC Major: Chapter One  |  A Manifesto, of Sorts  |  Let's Get It Started in Here  |  Designing with Web Standards  |  A New Direction  |  The Dashboard — and Other WWDC Goodies  |  Another Rant — Different Category  |  We Are a Zero Tolerance Community  |  Eye of the Tiger  |  Finishing Touches, and Microsoft: Do Not Pass Go! Do Not Collect $200!  |  Yay iPod! But What about the Mac?  |  w3c, Staticy Mini, Emacs  |  This Week in Review