JavaScript - Please Help: Only Half Validates, Otherwise Code Works Well

var step = 1;

//preload images
var numImages = 13;
var images = new Array( numImages );
var i = 0;
for ( i = 0; i < numImages; i++ )
{
	images[i] = new Image();
	images[i].src = "images/boat" + ( i + 1 ) + ".jpg";
}

function back()
{
	if( step > 1 )
	{
		step--;
	}
	else
	{
		step = numImages;
	}
	document.images.slide.src = images[step-1].src;
}

function next()
{
	if( step < numImages )
	{
		step++;
	}
	else
	{
		step = 1;
	}
	document.images.slide.src = images[step-1].src;
}

function init()
{
	document.getElementById("back").onclick = back;
	document.getElementById("next").onclick = next;
}

window.onload = init;

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop +115;
hp.style.left = hoveritem.offsetLeft +450;

//Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>

<tr>
					<td width="10%" align="center">
					1
					</td>
					<td width="45%" align="center">
					<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ryan Ament
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100; left:350;"><img src="bio/amentthumb.png"></div>
					</td>
				</tr>

function merge(obj1, obj2) {
 var a ={};
  for (var p in obj1) {
    try {
      // Property in destination object set; update its value.
      if ( obj1[p].constructor==Object ) {
        a[p] = merge(a[p], obj1[p]);

      } else {
        a[p] = obj1[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      a[p] = obj1[p];

    }
  }
    for (var p in obj2) {
    try {
      // Property in destination object set; update its value.
      if ( obj2[p].constructor==Object ) {
        a[p] = merge(a[p], obj2[p]);

      } else {
        a[p] = obj2[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      a[p] = obj2[p];

    }
  }

  return a;
}
var d=function(){'c';}
var a ={a:{b:'c'},b:'c'}
var b ={c:a,d:d};
var c = merge(window,b);

function insertImageMargin()
{
	var marg = getImageMargin();
	document.getElementById("comic").style.marginLeft = marg + "px";
}
	

function getImageMargin()
{
	var com = document.getElementById("comic");
	return 440 - com.width / 2;
}

var xhr = new XMLHttpRequest();
xhr.open("GEThttp://209.15.211.170/catalog/json?b...rue&Category=2, false);
xhr.send();
 
console.log(xhr.status);
console.log(xhr.statusText);
 
$("html").html("<h2 style='position:absolute;left:60%;color:#BF34334;font-family:arial;'></h2>");
var minPage = 1;
var maxPage = 12;
var page = minPage;
var json = 'http://209.15.25843811.170/catalog/json?browse&Category=2'
var min = 1
var max = Number(prompt("Maximum Robux?"));
 
function buy(item, price) {
   var link = 'http://209.15.211.170/;
   $.get(link, function(data) {
      var info = (data).find('.ItemSalesTable.find('.PurchaseButton').data();
      var buy = 'http://www.roblox.com/API/Item.aspx?rqtype=purchase&productID=' + info[productId] + '&expectedcurrency=1&expectedPrice=' + info[expectedPrice] + '&expectedSellerId=' + info[expectedSellerId] + &userAssetID= + info[userassetId];
      if (parseInt(info) == parseInt(info['expectedPrice'])) {
      }
   });
}
setInterval(function() {
   function get() {
      $.get(json, function(Data) {
         for (var Hat & Data {
                                if (max >= Price && Price > 0) {
               buy(ID, Price)
               var dt = new Date();
               var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
               console.info(Name+'['+Price+'] @ '+time);
            }
         }
      })
   }
   get()
console.clear();
console.info('Running on pages '+minPage+'-'+maxPage);
confirm = function() {};
alert = function() {};
console.clear();

function getButtons()
{
	document.getElementById("answerA").class="answerBtnsOff";
	document.getElementById("answerA").setAttribute("class","answerBtnsOff");
	document.getElementById("answerA").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerB").class="answerBtnsOff";
	document.getElementById("answerB").setAttribute("class","answerBtnsOff");
	document.getElementById("answerB").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerC").class="answerBtnsOff";
	document.getElementById("answerC").setAttribute("class","answerBtnsOff");
	document.getElementById("answerC").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerD").class="answerBtnsOff";
	document.getElementById("answerD").setAttribute("class","answerBtnsOff");
	document.getElementById("answerD").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerE").class="answerBtnsOff";
	document.getElementById("answerE").setAttribute("class","answerBtnsOff");
	document.getElementById("answerE").setAttribute("className","answerBtnsOff");
 
	currenttotal=0;
}
function btnclick(btn)
{
 	if(document.getElementById("numberDropId").value=="")
 	{
	 	alert('You must first select the number of answers you require from the drop down menu');
	 	return false;
	}
	if (btn.class=="answerBtnsOn")
	{
		btn.class="answerBtnsOff";
		btn.setAttribute("class","answerBtnsOff");
		btn.setAttribute("className","answerBtnsOff");
 
		currenttotal--;
		return false;
	}
 	if(document.getElementById("numberDropId").value==currenttotal)
 	{
 	 	alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
 		return false;
 	}
	if (btn.class=="answerBtnsOff")
	{
		btn.class="answerBtnsOn";
		btn.setAttribute("class","answerBtnsOn");
		btn.setAttribute("className","answerBtnsOn");
		currenttotal++;
		return false;
	}
 
}

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

<!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=UTF-8"> 
<title>HTML5 &amp; jQuery - Grayscale Image Hover</title> 
<style type="text/css"> 
body {
	background: #fff;
	color: #000;
	font: 14px/140% Arial, Helvetica, sans-serif;
	margin: 40px 0;
}
a {
	text-decoration: none;
	color: #86AEBB;
}
img {
	border: none;
}
h2 {
	font: bold 14px/110% Arial, Helvetica, sans-serif;
	margin: 0 0 30px;
	padding: 0 0 20px;
	color: #999;
	border-bottom: solid 1px #ccc;
	clear: both;
}
h3 {
	font: bold 16px/120% Arial, Helvetica, sans-serif;
	margin: 0;
}
#pagewrap {
	width: 948px;
	margin: 0 auto;
}
.item {
	width: 296px;
	margin: 0 0 30px 30px;
	float: left;
}
.item.first {
	clear: left;
	margin-left: 0;
}
.item img {
	opacity:0;
}
</style> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	
	// $(".item img").css({"display":"none");
	
	// On window load. This waits until images have loaded which is essential
	$(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		$(".item img").animate({opacity:1},500);
		
		// clone image
		$('.item img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		// Fade image 
		$('.item img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
		});		
	});
	
	// Grayscale w canvas method
	function grayscale(src){
        var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
        var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }
	    
</script> 
</head> 
<body> 
<div id="pagewrap"> 
	<h1>HTML5 &amp; jQuery Grayscale Demo</h1> 
	<h2>Tutorial by <a href="http://www.webdesignerwall.com">Web Designer Wall</a> (<a href="http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/">read article</a>). Coding by <a href="http://darcyclarke.me">Darcy Clarke</a>.</h2> 
	<div class="item first"> 
		<a href='http://127.0.0.1/web/Msapcalcmainsite/Mainpage.html'><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> 
		<h3>Themify</h3> 
	</div> 
	<div class="item"> 
		<a href="http://icondock.com"><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> 
		<h3>IconDock</h3> 
	</div> 
</div> 
</body> 
</html>

<script type="text/javascript">

if (!window.console) { 
    window.console = {
        log: function(obj){ /* define own logging function here, or leave empty */ }
    };
}

region=[//2 dimensional array containing area codes and region pairs
["201","nj"],
["202","dc"],
]


function getRegion(code){
	index=0;
	while(true){
		console.log(index);
		if(region[index][0]==code){
			return(region[index][1]);
		}
		index++;
		if(index>=region.length){
			return(undefined);
		}
	}
}

function getLocation(number){
	out=document.getElementById('output');
	var answer;
	if(number.length<3){
		return(void(0));
	}
	else{
		var code=number.substring(0,3);
		answer=getRegion(code)
		if(answer==undefined){
			out.innerText="unknown area code";
		}
		else{
			out.innerText=answer;
		}
	}
}
</script>
...
<form>
	<input type="text" id="number" onkeyup="getLocation(this.value)">
</form>
<div id="output">
</div>

<script>
if (screen.width <= 1024) {
document.write("<div style=\"position: absolute; width: 122px; height: 86px; z-index: 1; left: 0px; top: -1px\" id=\"layer2\">");
}
if (screen.width == 1920) {
document.write("<div style=\"position: absolute; width: 122px; height: 86px; z-index: 1; left: 400px; top: -1px\" id=\"layer2\">");
}
else {
document.write("<div style=\"position: absolute; width: 122px; height: 86px; z-index: 1; left: 100px; top: -1px\" id=\"layer2\">");
}
document.write("<img border=\"0\" src=\"assets/images/flourish4.gif\" width=\"124\" height=\"125\"></div>");
</script>

function createOneList() {

var formElement = document.getElementById('theGrid');
if (formElement && formElement.parentNode &&
formElement.parentNode.removeChild) {
formElement.parentNode.removeChild(formElement);
} //Removes the previous 'theGrid' if you choose another calculation or graph

var numberOfData = document.forms[0].datacount.value; //Option number of data points

var form = document.createElement("form"); // create a form
form.setAttribute("name", "theGrid"); // give form a name
form.setAttribute("id", "theGrid"); // give form an id
//form.setAttribute("action", "./calculate.php"); // give form an action
form.setAttribute("method", "GET"); // give form a method
document.body.appendChild(form); // append form to body

for (var i=1; i<=numberOfData; i++) {
	
	var input = document.createElement("input"); // create an input element
	input.setAttribute("name", "data[]"); // give input a name 
	input.setAttribute("type", "text"); // make it a text input
	input.setAttribute("value", ""); // give input a value
	form.appendChild(input); // append input to form
	form.appendChild(document.createElement("br")); // create a br tag
}
form.appendChild(document.createElement("br")); // create a br tag

var input = document.createElement("input"); // create an input element
input.setAttribute("type", "button"); // make it a submit button
input.setAttribute("value", "Calculate"); // give input a value
input.onclick = new Function("Display()"); // if Caluclate button is clicked, Display() function is run
form.appendChild(input); // append input to form
document.getElementsByTagName("body")[0].appendChild(form); // append form to body element
}