JavaScript - Javascript Code Only Works For 2 Seconds Or So Then Slows Down [help]

Hi guys!

I have a simple JavaScript stopwatch that displays the time using an html form with start/reset and clear buttons. Basically I'm making a speed calculator that converts seconds into MPH. All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense?

JavaScript is not my strong suit, and It's got me stumped.

JavaScript:
Code:

	var t=[0, 0, 0, 0, 0, 0, 0, 1];

	function ss() 
	{
	t[t[2]]=(new Date()).valueOf();
	t[2]=1-t[2];
	if (0==t[2]) 
	{
		clearInterval(t[4]);
		t[3]+=t[1]-t[0];
		t[4]=t[1]=t[0]=0;
		disp();
	} 
	else 
	{
		t[4]=setInterval(disp, 43);
	}
	}

	function r() 
	{
	if (t[2]) ss();
	t[4]=t[3]=t[2]=t[1]=t[0]=0;
	disp();
	t[7]=1;
	}

	function disp() 
	{
	if (t[2]) t[1]=(new Date()).valueOf();
	t[6].value=format(t[3]+t[1]-t[0]);
	}

	function format(ms) 
	{
	var d=new Date(ms+t[5]).toString()
		.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
	var x=String(ms%1000);
	while (x.length<3) x='0'+x;
	d+='.'+x;
	return d;
	}

	function load() 
	{
	t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
	t[6]=document.getElementById('disp');
	disp();
	}

HTML form:
Code:

  <input type='text' id='disp' maxlength=12 readonly />
  <button type='button' onclick='ss()' id='butt' data-inline="true">Start/Stop</button>
  <button type='button' onclick='r()' id='butt2' data-inline="true">Reset</button>

Any help is greatly appreciated!!!

I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others :

PHP Code:
<?php
echo $variable
?>



i want to put that variable output, in another files page title, lets say file2.php or file3.html,
in the front of the another files page titles, and auto refresh every x seconds, maybe like this :

Quote:
(1) - another text in the page title
after x seconds, get a private message
Quote:
(2) - another text in the page title
after another x seconds, get another private message
Quote:
(3) - another text in the page title




or its ok if just like this, only the variable, without the another text in the page title
Quote:
(1)




please share your knowledge to make it, maybe using javascript, jquery or others

Ok guys if you look at this page www.runningprofiles.com/members/shout/view.php my code works great....

But when i add it to the rest of the script the code wont work shows he
http://www.runningprofiles.com/membe...ll_Script.php#


Below is view.php (the one that works)
and the one added to the code scirpt is the one the does not.


PHP Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>





<ol>
<?php

//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='130' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view130">
<a href="#" class="view_comments" id="130">View all <?php echo $comment_count; ?> comments</a>
</div>


<?php 
} 
else 
{
$second_count=0;
}
?>




<div id="view_comments130"></div>
<div id="two_comments130">




<table width="30%">
<?php
$small=mysql_query("select * from comments where msg_id_fk='130' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{ 
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comment; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id;?> </span></td>
            
</tr> 
</table><br />
      </td>
  </tr>








</div>
<?php } ?>
</table>
</div>
</ol>

Facebook_Wall_Script.php

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>9lessons Applicatio Demo</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
 
 <script type="text/javascript">
<script type="text/javascript">
$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "../viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});



$(function() {

$(".comment_button").click(function() {

var element = $(this);
   
    var boxval = $("#content").val();
    
    var dataString = 'content='+ boxval;
    
    if(boxval=='')
    {
    alert("Please Enter Some Text");
    
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');
$.ajax({
        type: "POST",
  url: "update_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
 
  $("ol#update").prepend(html);
  $("ol#update li:first").slideDown("slow");
  
   document.getElementById('content').value='';
   $('#content').value='';
   $('#content').focus();
  $("#flash").hide();
  
    
    $("#expand_url").oembed(boxval);
    
  }
 });
}
return false;
    });


/ Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_update.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 
    parent.slideUp(300,function() { parent.remove(); });
  }
 });

}
});
return false;
});//comment slide
$('.comment').live("click",function() 
{

var ID = $(this).attr("id");
$(".fullbox"+ID).show();
$("#c"+ID).slideToggle(300);

return false;
});


//commment Submint

$('.comment_submit').live("click",function() 
{

var ID = $(this).attr("id");

var comment_content = $("#textarea"+ID).val();
    
    var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID;
    
    if(comment_content=='')
    {
    alert("Please Enter Comment Text");
    
    }
    else
    {
    
   
       $.ajax({
        type: "POST",
  url: "comment_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
  
 
  $("#commentload"+ID).append(html);
    document.getElementById("textarea"+ID).value='';
   
   $("#textarea"+ID).focus();
  
  }
 });
    
    
    }

return false;
});

// Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_comment.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 $("#comment"+ID).slideUp();
    
  }
 });
}
return false;
});




return false;

});


</script>


<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.update_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
    {
    text-decoration:none;
    color:#d02b55;
    }
    a:hover
    {
    text-decoration:underline;
    color:#d02b55;
    }
    *{margin:0;padding:0;}
    
    
    ol.timeline
    {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;}
    .delete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .cdelete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .feed_link
    {
    font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px
    }
    .comment
    {
    color:#0000CC; text-decoration:underline
    }
    .delete_update
    {
    font-weight:bold;
    
    }
    .cdelete_update
    {
    font-weight:bold;
    
    }
    .post_box
    {
    height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3;  width:499px;padding:.7em 0 .6em 0;line-height:1.1em;
    
    }
    #fullbox
    {
    margin-top:6px;margin-bottom:6px; display:none;
    }
    .comment_box
    {
        display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px;  height:50px;
    
    }
    .comment_load
    {
      margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;
    
    }
    .text_area
    {
    width:290px;
    font-size:12px;
    height:30px;
    }
    #expand_box
    {
    margin-left:90px;
    margin-top:5px;
    margin-bottom:5px;
    }
    embed
    {
        width:200px;
        height:150px;

    }
    
</style>
</head>

<body>
<?php include '../../../settings.php'; ?>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>


<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">

<tr><td align="left"><div align="left">
<h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>

</tr>

</table>
</form>

</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>



<ol  id="update" class="timeline">
</ol>

<div id='old_updates'>
<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>


<ol>
<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="50%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>
</ol>
<?php } ?>








</div>


</td>
</tr>
</table>






</div>
</body>
</html>

Hiya,

For school we programmed a game in JavaScript. We uploaded it to the school site (http://graphics.cs.wisc.edu/Courses/...spacewars.html) where it works the way it should. (In Firefox; other browsers don't work as well.)

However, I'm trying to upload the exact same code to my own website (http://www.tessaverbruggen.nl/Games/...spacewars.html), where for some reason it refuses to run and instead crashes the browser. To me it seems like it's stuck in some sort of while-loop. If I run it locally, it works fine (once again, in Firefox, after changing some settings in Firefox).

I program regularly, but I rarely do things web-related. So all the website related stuff was done by others. Which means I have absolutely no idea where to even start debugging. Theoretically it shouldn't be anything in the code as it's the exact same code, and it also runs locally...

Could it be some setting on my website/server? If not, what could it possibly be/where should I look?

Thanks!

I'm just starting JavaScript and wrote a quick script for Next/Back buttons for a page showing a family outing on our boat. I proudly uploaded the webpage and emailed it out, but people running IE are unable to use the buttons, they simply do nothing.

Here is the .js file, I don't think anything in the HTML or CSS is causing the issue but could post those as well if necessary.

Code:

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;

I've checked a lot of sites and can't figure this one out.

Also, if I'm practicing any bad coding techniques, I'm open to suggestions on that as well

Hi.

I am having trouble getting my code to validate for my speed/distance calculator. I have 2 input prompts: 1 for hours and 1 for minutes. The issue is I can put a number for hours (e.g 7) and W for minutes and the result will display distance is NaN, whereas I am expecting it to alert user to input a valid number. The same issue applies if I switch the order of isNan(hours) and isNaN(mins)

If you have even the slightest idea of what I have done wrong, or what I am missing I will truly appreciate the input. Thanks!

Code:

<html>
	<head>	
	<title>Sound Travel Calculator</title>
	<script type="text/javascript">
	
	// ??????????????????????????????????????????????????????????????????????????????????????????????????????????????
	// the program works pretty well except if i put, lets say 7 hours and w mins then it will say the distance traveled is NaN. but it should be re-prompting to enter hours and mins. It doesn't matter if I switch the order of isNan(hours) and isNaN(mins)
	// ??????????????????????????????????????????????????????????????????????????????????????????????????????????????
	
	
	
	// Setting our variables based on user input
	var hours = 0;
	var mins = 0;
	var m_per_secs = 340;
	
	alert("Speed of Sound \n\nAt Sea Level Sound Travels At 340 Metres Per Second \n\nIf You Would Like To Know How many Kilometres sound Will Travel In A Given Time, Click OK");
	hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)");
	mins = prompt("Please Enter Minutes");
	
	// Validating input for a number less than zero or an not a number
	while ((isNaN(hours)) || (isNaN(mins)) && (hours < 0) || (mins < 0)) 
		{
		alert("Please enter a numeric value, zero or greater");
		hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)");
		mins = prompt("Please Enter Minutes");
		}
	
	// if there is no input, the value is set to zero
	if (hours =="") 
		{
		hours = 0;
		}
	if (mins =="") 
		{
		mins = 0;
		}
		
	// Calculations
	dist = (((parseFloat(hours)) * 60 * 60) + (parseFloat(mins * 60)) * parseFloat(m_per_secs) / 1000)
	
	// Output our calculation
	alert("The Distance of Sound Travelled is " + (dist) + " Kilometres");
	//end program
	</script>
	</head>
	<body>
	</body>
</html>

I am trying to set up some code to control a mouseover popup image. I have the script that works except in certain browsers the results are different.

This is the page: http://www.huguenotbats.com/redesignfiles/team.php (just mouse over the first players name).

Here is the script:

Code:

<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>

And here is the html code:

Code:

<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>

The problem is this:

When tested on a Mac (running OS X 10.3.9)

in Opera the result is perfect
in Safari the popup image is too far down and to the left
in IE the script causes an error (Invalid procedure call or argument @ Line 13)

When tested on a PC (running XP Home Service Pack 3)

in Opera the result is perfect
in IE the image is only a tiny bit too far down

I can't find any rhyme or reason as to what the problem is or how to fix it (I'm still fairly new to JavaScript) but I really need to get this fixed the best I can so that the site redesign can be submitted to my client. Any help would be much appreciated.

Crystal

Hi, I'm having problems tracking down the code that causes IE to throw an error where all other browsers work just fine. I have attached the menu.js file, two style sheets (one for IE, the other for all browsers, css code for menu is at the end), and a body.html file that calls the menu. Of course these are uploaded as text files, but please feel free to rename and run the body file!

The IE error states that it's looking for an object after the script tag on line 18 of the body file that creates menu settings. What is wrong with this line, and how can I fix it?

Many thanks for any help that can be provided!

Solved

Hi, can anyone help me with this? The following html is to upload an image, it works ok on firefox, but while using google chrome, nothing happened when I clicked "upload LOGO" button.
.................................................................................................... ....
<html>
<body>
<form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">
<input type="file" style="display:none" onchange="checkLogo()" name="input_logo_file" id="input_logo_file" value="input_logo_file">
<input type="text" name="logo_flag" id="logo_flag" value="0" style="display:none;"/>
<a href="javascript:void(0);" onclick="input_logo_file.click()"><em>upload LOGO</em></a><br />
</form>
<script type="text/javascript">
function checkLogo(){
document.getElementById("logo_flag").value="1";
document.getElementById("initial_registration").submit();
}
</script>
</body>
</html>
.............................................................................................

this code works in google chrome, but not in firefox.
Code:

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);

WHY?!?!?!?!?!?!?!?!?!?!?!?!??!?!?!?!

Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code:

Code:

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

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

What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach?

Hi I am new to programming have tried to write a simple HTML page and servlet. Using tomcat.

Added a javascript validation function.

However when I type wrong it works the first time, displays alert and returns to entry form.

on second attempt type in wrong again, expected to see alert and return to entry form but it submits.

I am new to programmng and could do with some help can not find any clue, answer to this problem. Have checked javascript is ticked in Firefox 5.0.

Set up is I have a HTML page with one javascript check function at present for test development. It is linked to a servlet in tomcat.

Problem is when I enter wrong the first time, get alert message and it returns to the HTML orginal page.
However if I click on entry field and enter wrong again. It submits the form, does not give an alert or return to the orginal form?

Has any one got a solution or is this how validation should work.

Code is:
Code:

<HTML><head><title>Creation of POs</title>
<H1>Purchase Order</h1>
<script type="text/javaScript">
function check() {
check = document.forms[0].SLine1.value;
if(check=="wrong"){
alert("enter correct info");
return false;
} else {
return true; }
}
</script></head><body bgcolour="yellow">
<form method="GET" action="Distest_session30a_vs1" onSubmit="return 
check()">
various inputboxes and messages
<table>
<tr><td><input type="text" name="SLine1"></td></tr>
various other lines of inputs boxes
</table>
<Input type="submit" value="Send now">
</form></body></html>

Thanks in advance for any help people can give spent a lot of time on this already and can think of nothing else to try to resolve.

Using firefox 5.0, check and javascript is enabled?

Basically, i am creating an expandable/collapsible menu. which works fin in FF and chrome, but not in IE.

this is the code i can narrow it down to that is not working:
Code:

window.addEvent('domready', function() {
			SqueezeBox.initialize({});
			$$('a.modal').each(function(el) {
				el.addEvent('click', function(e) {
					new Event(eX).stop();
					SqueezeBox.fromElement(el);
				});
			});
		});

it keeps giving me errors, but when i take it out, it stops. it works in FF just fine and in chrome just fine. but in IE, it loads with errors and then the function is not working.

this is the code for the actual placement of the function:
Code:

echo '<div class="abstract">';
 echo '<div class="top">';
  echo '<h2 class="gold bold md-2">';
   echo wordwrap($row['vp_name'], 50, '<br>');
  echo '</h2>';
  echo '<span class="md">';
   echo 'Hotel: ';
  echo '</span>';
  echo '<strong class="md">';
   echo wordwrap($row['vp_hotel'], 50, '<br>');
  echo '</strong>';
  echo '<br />';
  echo '<span class="md">';
   echo 'Price Range: ';
  echo '</span>';
  echo '<strong class="md">';
   echo $row['vp_price'];
  echo '</strong>';
  echo '<br />';
  echo '<p>';
   echo 'Details: ';
   echo '<span class="expand blue">Expand</span> | <span class="collapse blue">Collapse</span>';
  echo '</p>';
 echo '</div>';
 echo '<div style="overflow:hidden;">';
  echo '<div class="more-details clear">';
   echo '<ul>';
	echo '<li>';
		echo $row['vp_desc'];
	echo '</li>';
	if(!empty($row['vp_terms'])){
		echo '<li>';
			echo $row['vp_terms'];
		echo '</li>';
	}
	if(!empty($row['vp_website'])){
		echo '<li>';
			echo '<a href="' . $row['vp_website'] . '" title="" rel="nofollow" target="_blank" class="md">Visit Website</a>';
		echo '</li>';
	}
   echo '</ul>';
  echo '</div>';
 echo '</div>';
echo '</div>';

I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons.

Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer?

Below is javascript functions:
Code:

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;
	}
 
}

If you html code then this is below:

Code:

<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>