Building the Front End of a List Generator with JavaScript

As I expressed in the section you just read, creating the set of additional input boxes required to provide each wrapped link with values for its “href” attribute and label respectively is only a matter of defining an appropriate JavaScript function that performs that task.

Therefore, below I listed the definition for the brand new “displayListGenerator()” function. It will take care of creating dynamically all the input boxes that I mentioned before by using some simple JavaScript statements and the DOM.

The signature for this function is as follows:

// 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;
}

If you examine the source code for the above function, then you’ll understand quickly what it does, particularly if the DOM and its methods are pretty familiar to you. As you can see, this JavaScript function first creates a new DIV, then appends the corresponding input boxes to this containing element, and finally inserts a new button into the container for triggering yet another specific function called “displayList().”

However, at least during the course of this article, I’d like you to pay attention to the group of tasks performed by the prior function. As you’ll probably remember from the previous section, the function in question will be triggered when the user selects the number of list items to be created via the respective select box, therefore this operation can be graphically represented by the following image:

After studying the above picture, hopefully you’ll have a more accurate idea of how the “displayListGenerator()” function does its business. Now, do you see how all the input boxes that allow users to enter the values for the respective “href” attribute and label of each list-wrapped link are dynamically created? I bet you do!

Of course, aside from showing you the signature for the “displayListGenerator()” that you just learned, here is the short JavaScript snippet that attaches an “onchange” event handler to the initial select menu after loading the respective web document. As you saw previously, this event also fires up the mentioned function, thus the definition for the script is as follows:

// 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)};
            }
}

Okay, at this stage you’ve learned not only how the front-end that corresponds to this list generator was created, but how the application uses the DOM for building dynamically all the additional input boxes required for constructing list-wrapped links. Pretty handy, right?

However, there’s still an extra step that I need to take to conclude this first article of the series. I need to list the complete definition of this JavaScript-based list generator, including all the client-side code that was developed in the previous sections.

That being said, click on the link that appears below and read the final section of the article. We’re almost done!