Home arrow JavaScript arrow Page 4 - 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 - Listing the application's complete source code
(Page 4 of 4 )

As I stated before, here you have at your disposal the entire source code that corresponds to this JavaScript-based list generator application. Take a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JavaScript-based List Generator</title> <script language="javascript"> // display unordered list input boxes function displayListGenerator(selObj){ // check if user has selected the 'none' option if(selObj.value=='none'){alert('Please specify the number of
list items to be created');return}; // remove existing 'gencontainer' DIV var div=document.getElementById('gencontainer'); if(div){div.parentNode.removeChild(div)}; // remove existing 'listcontainer' DIV var div=document.getElementById('listcontainer'); if(div){div.parentNode.removeChild(div)}; // create general containing DIV var div=document.createElement('div'); div.setAttribute('id','gencontainer'); div.className='elemcontainer'; // create form for list items var form=document.createElement('form'); // generate input boxes for list items for(var i=1;i<=selObj.value;i++){ var p=document.createElement('p'); // append label to paragraph p.appendChild(document.createTextNode('Link value ')); // create input box for href attribute var hrefbox=document.createElement('input'); hrefbox.setAttribute('type','text'); hrefbox.setAttribute('title','Enter value for "href"
attribute here'); hrefbox.className='hrefbox'; // append href box to paragraph p.appendChild(hrefbox); // append label to paragraph p.appendChild(document.createTextNode('Link label ')); // create input box for link label var labelbox=document.createElement('input'); labelbox.setAttribute('type','text'); labelbox.setAttribute('title','Enter label of link
here'); labelbox.className='labelbox'; // append label box to paragraph p.appendChild(labelbox); // append paragraph to form form.appendChild(p); } var p=document.createElement('p'); // create 'Generate list now!' button var button=document.createElement('input'); button.setAttribute('type','button'); button.setAttribute('value','Generate XHTML list now!'); button.className='button'; // append button to paragraph p.appendChild(button); // append paragraph to form form.appendChild(p); // append form to general DIV div.appendChild(form); // append general DIV to document tree document.getElementsByTagName('body')[0].appendChild(div); // assign 'onclick' event handler to button button.onclick=displayList; } // display unordered list of links function displayList(){ // remove existing list boxes container var div=document.getElementById('listcontainer'); if(div){div.parentNode.removeChild(div)}; // create general containing DIV var div=document.createElement('div'); div.setAttribute('id','listcontainer'); div.className='elemcontainer'; // create <textarea> element var textarea=document.createElement('textarea'); textarea.setAttribute('rows','10'); textarea.setAttribute('cols','71'); // append <textarea> element to general DIV div.appendChild(textarea); // append general DIV to document tree document.getElementsByTagName('body')[0].appendChild(div); var items=document.getElementsByTagName('form')[1].elements; if(!items){return}; // get class value for list var listclass=document.getElementsByTagName('form')[0].
elements[1].value; // get ID value for list var listid=document.getElementsByTagName('form')[0].
elements[2].value; var listhtml='<ul'; if(listclass){listhtml+='class="'+listclass+'"'}; if(listid){listhtml+='id="'+listid+'"'}; listhtml+='>n'; // generate XHTML list markup for(var i=0;i<items.length-1;i+=2){ if(items[i].getAttribute('type')!='button'){ listhtml+='<li><a href="'+items[i].
value+'">'+items[i+1].value+'</a></li>n'; } } listhtml+='</ul>'; // include XHTML list markup into <textarea> element textarea.value=listhtml; // select XHTML list markup textarea.select();           } // execute script when web page is loaded window.onload=function(){ if(document.getElementById&&document.createElement&&document.
createTextNode){ var sel=document.getElementsByTagName('form')[0].
elements[0]; if(!sel){return}; sel.onchange=function(){displayListGenerator(this)}; } } </script> <style type="text/css"> body{ padding: 0; margin: 0; background: #fff; } h1{ font: bold 24px Arial, Helvetica, sans-serif; color: #000; text-align:center; } form{ display:inline; } textarea{ width: 595px; } .elemcontainer{ width: 600px; padding: 10px; background:#eee; margin-left:auto; margin-right:auto; margin-bottom:5px; font: bold 12px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #999; } .button{ width: 200px; padding: 0px; } .labelbox,.hrefbox{ width: 200px; } </style> </head> <body> <h1>JavaScript-based XHTML List Generator</h1> <div class="elemcontainer"> <form> Number of list items <select name="numitems"> <option value="none">None</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> Class <input type="text" name="listclass" /> ID <input type="text" name="listid" /> </form> </div> </body> </html>

Here you have it! A fully-functional list generator that can be used with your favorite text editor to create your own list-wrapped links. As usual, feel free to tweak the code listed above, and enjoy introducing all the improvements that you wish.

Final thoughts

Finally, we've come to the end of the series. In this educational journey, I showed you how to create a simple JavaScript application which is capable of generating list-wrapped links by selecting a few straightforward options. If you're a web designer who wants to write tight, standard markup for your web pages, this tool might be quite useful. See you in the next web development tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials