Having troubles shifting out array

timgerr · Jan 30, 2008

I am writing a little webpage that collects collects/displays information when a user's mouse hovers over a div information is sent into an array (via javascript function) I only want the array to hold 5 items (have have been collected). For some reason this should be easy but I am unable to figure it out. Here is my code, what am I doing wrong?

Code:

<html>
	<head>
		<script type="text/javascript">
			var countMe = 0;
			var testArray = new Array();
			
			function countOver()
			{
				
				if(testArray.length > 5){
					testArray.shift();
				}
				testArray[countMe] = countMe + ' Hey man : ' + testArray.length +  '<br/>';
				document.getElementById('showMe').innerHTML = testArray.join('');
				countMe++;		
			}
			
		</script>
	</head>
	<body>
		<br/>
		<div id="hoverMe" onmouseover="countOver()">Hover Over Me</div>
		<div id="showMe"></div>
	</body>
</html>

Have a good one,
timgerr

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

kaht · Jan 30, 2008

Once you hit 5 elements in the array, you begin using the shift method to remove the first element. However, the countMe variable continues to go up.

So, look at what happens when you mouseover the 6th time - The first element of the array is removed and then the 6th (testArray[countMe]) element of the array is set to the string you generate - this means that the new 5th element is blank. You were at 5 elements in the array, removed the first element, going down to 4, and then explicitly set the 6th element (which leaves 5 blank). Next time you hover over, you remove the first element, going down to an array size of 5, and then explicitly set the 7th element because countMe keeps incrementing. This makes your array grow on every hover - adding extra blank elements to the array between the new strings you add.

What you probably meant to do was this:
(and I took out the extra countMe++ line since you could do it on the string assignment)

Code:

<html>
    <head>
        <script type="text/javascript">
            var countMe = 0;
            var testArray = new Array();
            
            function countOver()
            {
                
                if(testArray.length > 5){
                    testArray.shift();
                }
                testArray[[!]testArray.length[/!]] = countMe[!]++[/!] + ' Hey man : ' + testArray.length +  '<br/>';
                document.getElementById('showMe').innerHTML = testArray.join('');
            }
            
        </script>
    </head>
    <body>
        <br/>
        <div id="hoverMe" onmouseover="countOver()">Hover Over Me</div>
        <div id="showMe"></div>
    </body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Having troubles shifting out array

timgerr

IS-IT--Management

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor