Home arrow JavaScript arrow Finishing a List Generator with JavaScript

Finishing a List Generator with JavaScript

Looking for a comprehensive set of tutorials on how to develop a JavaScript application capable of generating list-wrapped links? Then, look no further, because your search is over. Welcome to the final part of the series “Building a list generator with JavaScript.” In these two articles, you’ll learn how to build a simple JavaScript program that creates a set of customizable links, wrapped by an unordered list, which can be copied and pasted straight into your favorite text editor.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
December 12, 2006
  1. · Finishing a List Generator with JavaScript
  2. · Listing the complete source code for the previous list generator
  3. · Displaying the source code for list-wrapped links
  4. · Listing the application's complete source code

print this article

Finishing a List Generator with JavaScript
(Page 1 of 4 )

Assuming that you've already read the previous installment of this series, you'll recall that I went through the development of an intuitive user interface. It allowed users to enter different options to create those popular list-wrapped links. The interface initially included three basic input elements for controlling the number of list items to be generated, as well as for supplying the respective class and ID attributes for the referenced list.

Besides creating this simple front end, I defined an important JavaScript function, called "displayListGenerator()", aimed at displaying dynamically the set of input boxes required for entering the values corresponding to the "href" attribute of each link, as well as for supplying the pertinent labels.

Logically, this relevant function was triggered by an "onchange" event handler, attached to the initial select box that was provided with the initial user interface. This means that the complete front end that belongs to this application is generated by a few progressive steps, according to the list options selected by the user.

So far, so good. In its current incarnation, the list generator is only capable of displaying the mentioned list controls; it lacks a proper area inside the web document where the all the generated (X)HTML markup that corresponds to the list-wrapped links can be copied and pasted. Thus, the question that comes now is: how can this process be performed?

Well, to provide the original application with the ability to display the complete source code for the mentioned links, in this final part of the series I'm going to define another crucial JavaScript function. It will append a simple text area dynamically to the web document tree, where the appropriate source code for the wrapped links can be copied and pasted into any text editor.

The challenge ahead of us seems rather simple, but interesting. Therefore, let's move on quickly and get this JavaScript-based list generator completed!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials