ok i got this code but i want to put the java script in a separate file so i can call the file instead of repeating the code but i cant seem to get it to work when i separate it please help
<!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>
<body>
<form action='somewhere' method='post' enctype='multipart/form-data'>
<fieldset>
<dl>
<dt><label for='after'>Amount to purchase:</label></dt>
<!--
Give the container a stepper_widget class. (You can change the default name of this class below.)
-->
<dd class='stepper_widget'><input type='text' id='after' value='1' class='min_0_max_5'/> <em>min: 0, max: 5</em></dd>
<!--
The class name of the text input determines the minimum and maximum numeric boundaries accepted
-->
</dl>
</fieldset>
</form>
<p>The CSS used here:</p>
<code>
.stepper_widget {vertical-align:top;}<br/>
.stepper_widget input{width:25px;}<br/>
.stepper_widget button{margin:0;padding:0;border:0;background-color:transparent;width:20px;cursor:pointer;}<br/>
.stepper_widget .upbutton{position:relative;top:-6px;}<br/>
.stepper_widget .dnbutton{position:relative;top:5px;left:-20px;}<br/>
</code>
<script type='text/javascript'>
/* <![CDATA[ */
var stepperWidgetMaker = new Object();
// settings
stepperWidgetMaker.containerElement = 'dd'; // default container element
stepperWidgetMaker.className = 'stepper_widget'; // default className for stepper widget
// the magic method
stepperWidgetMaker.init = function() {
var containers = document.getElementsByTagName(this.containerElement);
for (var i = 0; i < containers.length; i++) {
if (containers[i].className == this.className) {
var stepbox = false;
for (var t = 0; t < containers[i].childNodes.length; t++) {
if (containers[i].childNodes[t].nodeName.toLowerCase() == 'input') {
if (containers[i].childNodes[t].type == 'text') {
stepbox = containers[i].childNodes[t];
break;
}
}
}
if (stepbox) {
var parts = stepbox.className.split('_');
if (parts) if (parts.length == 3) var hasBounds = true;
else hasBounds = false;
var min = parseInt(parts[1]);
var max = parseInt(parts[3]);
if (max - min > 0) hasBounds = true;
stepbox.hasBounds = hasBounds;
stepbox.min = min;
stepbox.max = max;
stepbox.onkeyup = function() {
this.isNumeric = function(s) {
var chars = '0123456789.';
var isint = true;
var c;
for (i = 0; i < s.length && isint == true; i++) {
c = s.charAt(i);
if (chars.indexOf(c) == -1) isint = false;
}
return isint;
}
if (this.isNumeric(this.value)) {
if (this.hasBounds) {
if (this.value > max) this.value = max;
else if (this.value < min) this.value = this.min;
}
}
else this.value = this.min;
}
var upbutton = document.createElement('button');
upbutton.className = 'upbutton';
upbutton.appendChild(document.createTextNode("\u25B2"));
upbutton.targInput = stepbox;
upbutton.max = max;
upbutton.onmousedown = function() {
var targInput = this.targInput;
var max = this.max;
if (targInput.value < max || !hasBounds) targInput.value++;
var delayedOnce = false;
var date = new Date();
var curDate = null;
this.interval = setInterval(function() {
if (!delayedOnce) {
curDate = new Date();
if (curDate - date > 500) delayedOnce = true;
}
else if (targInput.value < max || !hasBounds) targInput.value++;
}, 50);
return false;
}
upbutton.onclick = function() {
clearInterval(this.interval);
return false;
}
upbutton.onmouseup = function() {
clearInterval(this.interval);
return false;
}
var dnbutton = document.createElement('button');
dnbutton.className = 'dnbutton';
dnbutton.appendChild(document.createTextNode("\u25BC"));
dnbutton.targInput = stepbox;
dnbutton.min = min;
dnbutton.max = max;
dnbutton.onmousedown = function() {
var targInput = this.targInput;
var min = this.min;
var max = this.max;
if (targInput.value > min || !hasBounds) targInput.value--;
var delayedOnce = false;
var date = new Date();
var curDate = null;
this.interval = setInterval(function() {
if (!delayedOnce) {
curDate = new Date();
if (curDate - date > 500) delayedOnce = true;
}
else if (targInput.value > min || !hasBounds) targInput.value--;
}, 50);
return false;
}
dnbutton.onclick = function() {
clearInterval(this.interval);
return false;
}
dnbutton.onmouseup = function() {
clearInterval(this.interval);
return false;
}
if (stepbox.nextSibling) {
containers[i].insertBefore(dnbutton, stepbox.nextSibling);
containers[i].insertBefore(upbutton, stepbox.nextSibling);
}
else {
containers[i].appendChild(upbutton);
containers[i].appendChild(dnbutton);
}
}
}
}
}
stepperWidgetMaker.init();
/* ]]> */
</script>
</body>
</html>