Javascript/HTML error - eventPostionx is not defined?

S

seeminglylost

New member
I am doing an assignment where one is supposed to click on a button and scroll it across the screen to show a series of photos. I can get it to work using the right and left direction buttons on my keyboard but it is supposed to work dragging the mouse as well. I have been looking at this for hours and I don't know where it is that I am going wrong.

Can someone take a look at my code and let me know what they think?

Code: 
  Filename:         badger.htm
   Supporting files: back.jpg, bar.jpg, corner.jpg, functions.js
                     image0.jpg-image9.jpg, links.jpg, logo.jpg, styles.css
-->
<title>Badger Aviation</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">  // #2 added embedded script element

if (document.images) {
var slide=new Array();  // #a created image array and added images 0-9
slide[0]=new Image();
slide[1]=new Image();
slide[2]=new Image();
slide[3]=new Image();
slide[4]=new Image();
slide[5]=new Image();
slide[6]=new Image();
slide[7]=new Image();
slide[8]=new Image();
slide[9]=new Image();

slide[0].src="images/image0.jpg";
slide[1].src="images/image1.jpg";
slide[2].src="images/image2.jpg";
slide[3].src="images/image3.jpg";
slide[4].src="images/image4.jpg";
slide[5].src="images/image5.jpg";
slide[6].src="images/image6.jpg";
slide[7].src="images/image7.jpg";
slide[9].src="images/image9.jpg";
}
var IE = document.attachEvent ? true:false  // #b global variable to indicate if IE event model is supported
var DOM = document.addEventListener ? true:false  // b global variable to indicate if DOM event model is supported

function applyEventF(obj, ename, fname, cap) {  // #3a adds function to an object as the event occurs
 if (IE) obj.attachEvent("on" + ename, fname);
 else if (DOM) obj.addEventListener(ename, fname, cap);
}

function removeEventF(obj, ename, fname, cap) {  // #b removes attached function from an object
 if (IE) obj.attachEvent("on" + ename, fname);
 else if (DOM) obj.removeEventListener(ename, fname, cap);
}

function eventPositionX(e) {  // #c returns the x coordinate of an event
 if (IE) return event.clientX;
 else if (DOM) return e.clientX;
}

function getKeyCode(e) {  // #d returns keycode value of a keyboard event
 if (IE) return event.keyCode;
 else if (DOM) return e.keyCode;
}

function setup() {  // #4 sets up the page for the operation of the horizontal scrollbar
 var button=document.getElementById("button"); // #a references the element with the id "button"
 button.onmousedown=grabIt;  // #b document object that runs the grabIt() function
 document.onselectstart=stopSelect;  // #c document object that runs the stopSelect() function
 document.onkeydown=keyShow;  // #d document object that runs the keyShow() function
} 



function stopSelect() {  // #5 returns the value false
 return false;
}

function grabIt(e) {  // #6 created function to grab the scroll bar button
 applyEventF(bar,"mousemove",moveIt,false);
     applyEventF(bar,"mouseup",dropIt,false);
}

function moveIt(e) {  // #7 created function and added parameter "e"
 var mouseX=eventPostionX(e);  // #a current position of the X postion of the event 
 var diffX=mouseX-200;  // #b current position of the scrollbar button
 var buttonposX=diffX;  // #c makes sure the scroll button is not dragged off of the scroll bar
     if (buttonposX < 20) buttonposX=20;     
 if (buttonposX > 299) buttonposX=299;      
 placeIt(button, buttonposX, 6);  // #d function to place the scroll button object
 showImage(buttonposX);  // #e calls the showImage() function
}

function dropIt() {  // #8 created function to detach moveIt() from the mousemove event occuring in the scrollbutton object
 removeEventF(bar,"mousemove",moveIt,false);
}
  
function keyShow(e){  // #9 function is to move the scroll bar button using the left and right arrows on the keyboard.
     key=getKeyCode(e);  // #a stores the keycode value
     buttonPosX=getXCoord(button);  // #b stores the x coordinate of the scrollbar
     if (key==37) buttonPosX -= 31;  // #c left arrow key is pressed, decrease the value by 31
     if (key==39) buttonPosX += 31;  // #c right arrow key is pressed, increase the value by 31
     if (buttonPosX < 20) buttonPosX =20;  // #d setting values on the buttons  
     if (buttonPosX > 299) buttonPosX = 299;  // #d setting values on the buttons
     placeIt(button, buttonPosX,6);  // #e places the scroll bar at the coordinates
     showImage(buttonPosX);  // #f calls the showImages() function
     return false;  // #g returns value as false so that Safari treats the arrow keys as single buttons
}

function showImage(x) {  // #10 determines which image to display based on the postion of the scrollbar button
  var i = Math.floor((x-20)/31);  // #a coverts
function showImage(x) {  // #10 determines which image to display based on the postion of the scrollbar button
  var i = Math.floor((x-20)/31);  // #a coverts x coordinate range into an index number
        document.photo.src = slide[i].src;  // #b changes the source of the slide[i] image
}


</script>
</head>

<body onload="setup()">  <!-- #11 added event handler to the body element that runs the setup() function-->
 
Back
Top