Finishing a List Generator with JavaScript - Listing the complete source code for the previous list generator
(Page 2 of 4 )
As I usually do in all my articles on web development, I'd like to refresh some topics discussed in preceding tutorials. In this specific case, I want to list the complete source code for this list generating application, as it was originally defined in the first part of the series.
Having said that, here is the complete definition for the mentioned JavaScript-based application:
<!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;
}
// 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>
As you'll possibly remember, the file listed above is still incomplete, since its JavaScript section contains a call to the "displayList()" function. This function hasn't been defined yet. This condition is clearly illustrated by the following line of code:
// assign 'onclick' event handler to button
button.onclick=displayList;
Essentially, what the previous JavaScript statement means is that the form button labeled "Generate XHTML list now!", included within the pertaining user interface, will call the respective "displayList()" function. In this way it will show on the web page the complete source code that corresponds to the list-wrapped links that were dynamically constructed.
Additionally, you should remember that the aforementioned source code will be displayed on a regular <textarea> element, therefore it can be easily copied and pasted into any text editor. As you'll realize, this implies that it's necessary to find out how the "displayList()" function looks.
Taking into account this requirement, in the following section I'll show you the signature for this completely new function. Click on the link below and keep reading to learn more on this topic.
Next: Displaying the source code for list-wrapped links >>
More JavaScript Articles
More By Alejandro Gervasio
