hello i am trying to use mootol on my site but i am somehow getting the following error
Code:
$("info4") has no properties
[Break on this error] $('info4').setHTML(item.getFirst().innerHTML);
on firebug every time i click on a span link
here is the javascript
Code:
<script type="text/javascript">
	window.addEvent('domready',function(){
	
	//SAMPLE 4 (walk to item)
		var hs4 = new noobSlide({
			box: $('box4'),
			items: $ES('div','box4'),
			size: 480,
			handles: $ES('span','handles4'),
			onWalk: function(item,handle){
				$('info4').setHTML(item.getFirst().innerHTML);
				this.handles.removeClass('active');
				handle.addClass('active');
			}
		});
	
	});
	
	</script>
and the js class is
Code:
var noobSlide = new Class({

	initialize: function(params){
		this.items = params.items;
		this.mode = params.mode || 'horizontal';
		this.modes = {horizontal:['left','width'], vertical:['top','height']};
		this.size = params.size || 240;
		this.box = params.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
		this.button_event = params.button_event || 'click';
		this.handle_event = params.handle_event || 'click';
		this.interval = params.interval || 5000;
		this.buttons = {previous: null, next: null, play: null, playback: null, stop: null};
		if(params.buttons){
			if(params.buttons.previous){ this.buttons.previous = params.buttons.previous.addEvent(this.button_event,this.previous.bind(this,true)); }
			if(params.buttons.next){ this.buttons.next = params.buttons.next.addEvent(this.button_event,this.next.bind(this,true)); }
			if(params.buttons.play){ this.buttons.play = params.buttons.play.addEvent(this.button_event,this.play.bind(this,[this.interval,'next'])); }
			if(params.buttons.playback){ this.buttons.playback = params.buttons.playback.addEvent(this.button_event,this.play.bind(this,[this.interval,'previous'])); }
			if(params.buttons.stop){ this.buttons.stop = params.buttons.stop.addEvent(this.button_event,this.stop.bind(this)); }
		}
		this.handles = params.handles || null;
		if(this.handles){
			for(var i=0;i<this.handles.length;i++){ this.handles[i].addEvent(this.handle_event,this.walk.bind(this,[i,true])); }
		}
		this.fx = new Fx.Style(this.box,this.modes[this.mode][0],params.fxOptions||{duration:500,wait:false});
		this.onWalk = params.onWalk || null;
		this.current = params.startItem || 0;
		this.autoPlay = params.autoPlay || false;
		this._auto = null;
		this.box.setStyle(this.modes[this.mode][0],(-this.current*this.size)+'px');
		if(params.autoPlay) this.play(this.interval,'next');
	},

	previous: function(manual){
		this.current += this.current>0 ? -1 : this.items.length-1;
		this.walk(null,manual);
	},

	next: function(manual){
		this.current += this.current<this.items.length-1 ? 1 : 1-this.items.length;
		this.walk(null,manual);
	},

	play: function(delay,direction){
		this.stop();
		this[direction](false);
		this._auto = this[direction].periodical(delay,this,false);
	},

	stop: function(){
		$clear(this._auto);
	},

	walk: function(item,manual){
		if($defined(item)){
			if(item==this.current) return false;
			this.current=item;
		}
		if(manual){ this.stop(); }
		this.fx.start(-this.current*this.size);
		if(this.onWalk){ this.onWalk(this.items[this.current],(this.handles?this.handles[this.current]:null)); }
		if(manual && this.autoPlay){ this.play(this.interval); }
	}
	
});
the are the links thtat causes the problem somehow.
Code:
<!--<h4>Show: <span id="info4"></span></h4>
	<p class="buttons" id="handles4">
		<span>1. item one</span>
		<span>2. item two</span>
		<span>3.  item three</span>
		<span>4.  item four</span>
		<span>5.  item five</span>
		<span>6.  item six</span>
		<span>7.  item seven</span>
		<span>8.  item eight</span>
anny way to fix this error?many thanks