JavaScript - Creating Divs Not Working

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!

I hope I have this post in the right place! Any help would be very much appreciated...

I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website.

This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser)

My javascript is he
http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces)

The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces)

In the head I have:
<script type="text/javascript" src="../javascript/backgroundchange.js"></script>

...then I have: <body onload="set_style_from_cookie()">

...and for users to choose which background:
<form>
<input type="image" src="../images/white-background-thumb.jpg"
onclick="switch_style('bg1');return false;"
name="theme" value="White" id="bg1">
etc...
</form>

My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally!

I have tried putting the javascript directly onto each page but I still had the same problem.

I hope someone can help, I will be so grateful if I can get this to work.

Many thanks indeed!

Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php

The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/
The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/
And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images.

I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing...

First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine.

Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing.

Thanks for any help.

I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me?

Thanx in advance.

hereis the html file and javascripton click of this button a
html *****************************
<table class=matcolor id=topnav cellspacing=0
cellpadding=0 width=550 border=0 bgcolor="#FFCCCC">
<tbody>
<tr align=middle>
<td id=menu1
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Desk Top Publishing </font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu2
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Transcription</font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu3
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Accounts Processing </font></div>
</td>
</tr>
</tbody>
</table>
*****************************************

<script language=JavaScript>
ix = document.getElementById('tblmenu1').getBoundingClientRect();
new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10);
</script>
**any thing i have to alter to work in firefox
please help

i need to create a div as i click down and move while pressing the mouse button
and the div will increase in size as i move the mouse while still pressing the mouse button.

how can i accomplish this task

Hi i am looking to create a js pop up to display an amazon widget which relates to an item on my page.

so i've found this on the net
http://blazonry.com/javascript/windows.php

but im not very javascript minded and dont know where to start.


so i have tried this
Code:

<img src="images/listen.png" border="0" alt="Preview Songs" title="Preview Songs" onclick="window.open("song_preview.php?id=<?php echo $row['ASIN']?>","Window1","menubar=no,width=430,height=360,toolbar=no");" />

but it loads a blank pop up at the same time the page loads up and not when an image is clicked?

plus when i first loaded the page it said pop up blocked which sucks!! on the example i didnt get that, any reason why???

any help is appreciated
thanks
Luke

Hey All,

I've currently working on making a calendar for my website.

How do I go about creating a password for it? So that the admin can add events to it.

Cheers Guys!!!

If anyone is planning on buying "ICAB4225B Automate Processes" in relation to a TAFE/College/School course, I suggest getting the teacher to actually READ the book before they use it.

Tonight has been a HE-Double Hockeysticks (Not sure on language in this forum) of fixing mistakes the book has made. Double commars inplace of singles, singles inplace of doubles, single brackets, whole chunks of text that are wrong. In one place in the book it tells me to copy the text in blod and there is none.

Anyway....

The code that the book has made me piece together over the last few questions has left me with:

Code:

<script type = "text/javascript">
{
	var counter = 0
	var NoOfItems
	var ItemsNames = new Array()
	
	

	
	NoOfItems = prompt ("How many items do you want to hock?","");
		for (NameCount=0; NameCount<NoOfItems; NameCount++)
			{
				ItemNames [NameCount] = prompt ("What are the names of your items?","");
			}
	
	document.write ("<form name='myform'><br><table>");
		while ( counter < NoOfItems)
			{
				document.write ("<tr><td><value>Enter the price of the " + ItemNames [count] + "</td><td><input type='text' name='" + ItemNames [count] + "'></td></tr>");
				counter++
			}
		document.write ("<tr><td><input type='submit' value='Submit Details' onClick='validateform'</td></tr></table></form>");
}
</SCRIPT>

The problem I am having it with the Array. I dont think that var = new Array is correct but thats what my text book is telling me. Any help?

Hi, my name is Joe.

I have no expierience in writting scripts buy have managed to put together what I think is a decent website for a local business. It is a local Bait & Tackle shop. I have done this for free as I am retired and work a few days a week in the owners shop.

This is my situation.

I wish to display the current days high tides in a web page.

I have created a database (csv file) which resides on my server
This file has two fields: date and tidal times

I am looking for a script that test the "date" field and if it is equal to the current date, display the tidal field.

Any help would be appreciated.

Thanks,

Alright I have never really created a class before and I have to for a project. This is what I have so far and I will try to explain the requirements I am looking for thoroughly and what problems I am having.

Code:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="javascript" type="text/javascript">

  function clock () { //Object Constructor

  	this.setT = function() { //Method Set Time
		//Properties
	    this.currentTime = new Date ( );
  		 this.currentHours = this.currentTime.getHours ( );
  		 this.currentMinutes = this.currentTime.getMinutes ( );
  		 this.currentSeconds = this.currentTime.getSeconds ( );
    }
	clock.prototype.displayTime = function () {
		clock.setT
	}
  }
</script>

<body>
<form name="form1">

    <p>
      <input type="text" rows=7 cols=60 name="currentTime">
      <br>
      <input type="button" value="Set Time" onClick="clock.displayTime();">
      <br>
      <input type="button" value="Display Time" onClick="currentTime.value= completeTime;">
      <br>
	  <input type="reset" value="Reset">
    </p>
</form>
</body>
</html>

The clock class contains:
Three Properties:
Hours Minutes, Seconds
Two Methods
setTime (which uses date class to get current time)
Must be defined in the constructor
displayTime (returns a string displaying current time)
Must be defined as a prototype property of constructor

The below is a very rough outline, and probably not correct. I've been reading up on objects for the last few hours and can't be very sure of anything yet.

Code:

 function clock() {
	
	this.currentTime = new Date ( );
	 var currentHours = currentTime.getHours ( );
 	 var currentMinutes = currentTime.getMinutes ( );
 	 var currentSeconds = currentTime.getSeconds ( );
	 
	this.setTime = function() {
		
	}
}

clock.prototype.displayTime = function ( ) {
	
}

I guess my biggest problem now is the outline. Any help would be great hopefully once i get what goes where i can actually start writing the code. I already have the full code to write a basic clock just like this but it doesn't use classes or any of this.

So yeah, I'm making a science fair project, and need to know if someone could make the script below work into being invincible.

Code:

 
 <Style Type="Text/CSS">
 <!--
 Input{}
 .blokje{
 Height:48px;
 Width:48px;
 Font-Size:16pt;
 Font-Weight:900;
 Font-Family:Comic Sans MS,Arial,Verdana;
 Text-Align:Center;
 }
 .knopje{
 Width:144px;
 }
 -->
 </Style>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Rob van der Ven (vennie@wanadoo.nl) -->
<!-- Web Site:  http://home.wanadoo.nl/vennie -->
<Center>

<Form>
<Input Type="Button" Title="Click here to play again" Name="beurten" Width="164px" Class="knopje" Value="Player 1" onClick="wie = 'Player 1'; initieer()">
<Table CellPadding="0" CellSpacing="0" Border="0">

<Script Language="JavaScript">
<!--//
for (i = 1; i < 10; i++) {
if (i % 3 == 1) {document.write('<Tr>');}
document.write('<Td><Input Type="Button" Name="' + i + '" Value="    " Class="blokje" onClick="wijzig(this.form,this)"></Td>');
if (i % 3 == 0) {document.write('</Tr>');}
}
//-->
</Script>

</Table>

<Input Type="CheckBox" Title="Click here to change from 2 players or computergame" Name="automaat" Value="2 players" Id="autmat" onClick="if (this.value == 'Computer') {this.value = '2 players'; auto = 0} else {this.value = 'Computer'; auto = 1}; wie = 'Player 1'; initieer();"><Label For="autmat">against the computer</Label>

<Table CellPadding="0" CellSpacing="0" Border="1">
<Tr BgColor="Silver">
<Td Align="Center"> Player 1 </Td>
<Td Align="Center"> Player 2 </Td>
<Td Align="Center"> Tie </Td>
</Tr>
<Tr BgColor="Silver">
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Player 1" Name="speler1" Value="0"></Td>
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Player 2" Name="speler2" Value="0"></Td>
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Tie" Name="Tie" Value="0"></Td>
</Tr>
</Table>
</Form>
</Center>

<Script Language="JavaScript">
<!--//

timerID = xtal = ytal = ztal = auto = 0;
wie = 'Player 1';

function initieer(){
	clearTimeout(timerID);
	cel = new Array(0,0,0,0,0,0,0,0,0,0);
	aanv = new Array(); strat = verd = leeg = aanv;
	beurt = wissel = 1; wint = keren = 0;
	document.forms[0].speler1.value = xtal;
	document.forms[0].speler2.value = ytal;
	document.forms[0].tie.value = ztal;
	if (wie != 'Start') {
	for (i in cel) {
			cel[i] = 0; if (i > 0) {document.forms[0].elements[i].value = ''};
			}
	}
	document.forms[0].beurten.value = wie;
}

function zetten() {
    clearTimeout(timerID);
    if (aanv[0] > 0) {
		slag = aanv[Math.floor(Math.random() * 10) % aanv.length]
    } else if (verd[0] > 0) {
		slag = verd[Math.floor(Math.random() * 10) % verd.length];
    } else if (strat[0] > 0) {
		slag = strat[Math.floor(Math.random() * 10) % strat.length];
    } else {
		slag = leeg[Math.floor(Math.random() * 10) % leeg.length];
    }

    if (beurt == 0 && slag > 0) {document.forms[0].elements[slag].click()};
}


function win() {
  if (	cel[1] + cel[2] + cel[3] == 3 ||
	cel[4] + cel[5] + cel[6] == 3 ||
	cel[7] + cel[8] + cel[9] == 3 ||
	cel[1] + cel[4] + cel[7] == 3 ||
	cel[2] + cel[5] + cel[8] == 3 ||
	cel[3] + cel[6] + cel[9] == 3 ||
	cel[1] + cel[5] + cel[9] == 3 ||
	cel[3] + cel[5] + cel[7] == 3
     ) {

	if (confirm("Player 1: You win !!!\nDo you want to play again?"))
	{
	wint = 1;
	xtal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)
	} else {
	xtal++; wie = 'Start'; timerID = setTimeout('initieer()',800)
	};
    }
  if (	cel[1] + cel[2] + cel[3] == 30 ||
	cel[4] + cel[5] + cel[6] == 30 ||
	cel[7] + cel[8] + cel[9] == 30 ||
	cel[1] + cel[4] + cel[7] == 30 ||
	cel[2] + cel[5] + cel[8] == 30 ||
	cel[3] + cel[6] + cel[9] == 30 ||
	cel[1] + cel[5] + cel[9] == 30 ||
	cel[3] + cel[5] + cel[7] == 30
     ) {
	if (confirm(((auto == 1) ? ('Computer wins, sorry') : ('Player 2: You win !!')) + "!\nDo you want to play again?")) {
	ytal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)
	} else {
	ytal++; wie = 'Start'; timerID = setTimeout('initieer()',800)
	};
   }
}

function wisselen(beurt){
  if (wissel == 1)  {
    if (beurt == 0) {
        beurt = 1;
        wie = "Player " + 1
    }
    else {
        if (auto == 0) {beurt = 0;
	wie = "Player " + 2} else {beurt = 0; wie = "Computer";}
    }
      if (keren == 9
     ) {
	if (confirm("Tie!!!\n\nDo you want to play again?")) {
	ztal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)} else
	{ztal++; wie = 'Start'; timerID = setTimeout('initieer()',800)};
      }

  }
  else {
    beurt = beurt;
  }
  wissel = 1;
  return(beurt);
}

function wijziging(klik) {

plek = cel[klik]; geklikt = klik;

if (plek == 0){
   if (beurt == 0){
	xo = "O";
	plek = 10;
   } else {
	xo = "X";
	plek = 1;
   }
cel[klik] = plek; keren++;
}
else {
   if (plek == 10){
       xo = "O";}
   if (plek == 1){
       xo = "X";}
   wissel = 0
}
return(xo);
}

function verdedig() {leeg = new Array(); verd = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 1;
  if ( (cel[1] + cel[2] + cel[3] == 3 ||
	cel[4] + cel[5] + cel[6] == 3 ||
        cel[7] + cel[8] + cel[9] == 3 ||
        cel[1] + cel[4] + cel[7] == 3 ||
        cel[2] + cel[5] + cel[8] == 3 ||
        cel[3] + cel[6] + cel[9] == 3 ||
        cel[1] + cel[5] + cel[9] == 3 ||
        cel[3] + cel[5] + cel[7] == 3) && oud == 0
     ) { verd[verd.length] = i}
   cel[i] = oud;
   if (cel[i] == 0) {
   if (keren != 1) {leeg[leeg.length] = i} else
   if (cel[5] == 0) {leeg[0] = 5; leeg[1] = 10 - geklikt} else
   if (i % 2 != 0) {leeg[leeg.length] = i}
   };
}
}

function aanval() {aanv = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 10;
  if ( (cel[1] + cel[2] + cel[3] == 30 ||
	cel[4] + cel[5] + cel[6] == 30 ||
        cel[7] + cel[8] + cel[9] == 30 ||
        cel[1] + cel[4] + cel[7] == 30 ||
        cel[2] + cel[5] + cel[8] == 30 ||
        cel[3] + cel[6] + cel[9] == 30 ||
        cel[1] + cel[5] + cel[9] == 30 ||
        cel[3] + cel[5] + cel[7] == 30) && oud == 0
     ) { aanv[aanv.length] = i}
cel[i] = oud;
}
}

function strategie() {strat = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 10;
  if ( (cel[1] + cel[2] + cel[3] == 20 ||
	cel[4] + cel[5] + cel[6] == 20 ||
        cel[7] + cel[8] + cel[9] == 20 ||
        cel[1] + cel[4] + cel[7] == 20 ||
        cel[2] + cel[5] + cel[8] == 20 ||
        cel[3] + cel[6] + cel[9] == 20 ||
        cel[1] + cel[5] + cel[9] == 20 ||
        cel[3] + cel[5] + cel[7] == 20) && oud == 0
     ) {
     if (keren != 3) {strat[strat.length] = i} else if (i % 2 != 0) {strat[strat.length] = i}
     }
cel[i] = oud;
}
}

function wijzig(form,element){
    wijziging(element.name);
    element.value = xo;
    beurt = wisselen(beurt);
    form.beurten.value = wie;
    verdedig(); aanval(); strategie(); win();
    if (auto == 0 || wint == 1) {return} else {
    timerID = setTimeout('zetten()',600)
    }
}

initieer(); 

I have asked to create a chatbox, which acts just like a messenger which I type a text in the textbox and press send to show output to the messagebox.
However, in my code, I have 2 bugs which is bothering me. The first one is whenever I press spacebar, a "+" sign appear. The second is the first text disappeared whenever I type the second text. Please help me.

Code:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript"> 
<!--
var isShift=null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var OP = (navigator.appName.indexOf("Opera")!=-1);
if(OP)isNN=true;
var key;
function shift(event){
key = (isNN) ? event.which : event.keyCode;
if (key==16)isShift=1;
}
function process(event){
key = (isNN) ? event.which : event.keyCode;
if(document.layers&&event.modifiers==4){
isShift=1;
}
if (key==13&&isShift!=1){
document.myForm.submit();
}
if (key!=16)isShift=null;
}
function retrieve(){
document.myForm.text1.focus();
if(location.search.length>0){
blubb=unescape(location.search.split('=')[1]);
document.myForm2.text2.value=blubb;
}
}
//-->
</script>
</head>
<body onload="retrieve()">
<form name="myForm">
<textarea name="text1" onkeypress="process(event)" onkeydown="shift(event)" cols="50" rows="7"></textarea><input type="submit" accesskey="s" value="Send">
</form><br><br>
This second textarea is just to show, that the line breaks "arrive":<br>
<form name="myForm2">
<textarea name="text2" cols="50" rows="7"></textarea>
</form>
</body>
</html>

hi

i am new to javascript. i make a mcq quiz website in one of server side script. now for that website i want to make count down timer so when that quiz starts the user will have 5 minutes to complete that quiz if use does not able to complete quiz in given time then quiz should disable and shows the user score

how can i achieve this