Trying to create an array full of ongoing numbers with add/remove buttons, not showing up on page

[Heather Rose]

Alright, here's my problem:

I have a div tag, and 2 buttons: Add and Remove.

The add button is supposed to add a number starting at one. The Remove button is supposed to remove a number from the array and output the updated array.

I have 2 buttons, and my onClick event is targeted to the add and remove methods, but for some reason, nothing happens either way. I'm only trying to output them right now, without even bothering with a div tag yet.

Here's what I have:

 var numbers = new Array();
 var x;

  function addNumber() {
   x = x+1;
   numbers = numbers(x);

   for (i=0;i<=x;i++)
   { 
    document.write(x);
    document.write(" ");
   }

  }

  function removeNumber() {
   x = x-1;
   numbers = numbers(x);

   for (i=0;i<=x;i++)
   { 
    document.write(x);
    document.write(" ");
   }

  }  

And my buttons call those methods.

Any ideas?

[David Newton]

Well, you're calling a function called "numbers" and passing it "x" as a parameter--do you have a function called "numbers"?

You're also setting your global "numbers" variable, initially defined as an array, to the result of calling "numbers(x)"--is this what you intend to do?

[Eric Pascarello]

You can not use document.write after the page loads. You need to use DOM methods createElement and appendChild or innerHTML.

Eric

[Heather Rose]

I see what you are saying David, I am trying to have an array without defining a size (hence 'x').


Eric, can you give me an example of how I should go about displaying the numbers when I am through with my logic? Thanks.

[Eric Pascarello]

http://www.tizag.com/javascriptT/javascript-innerHTML.php

[David Newton]

Heather Rose wrote:I see what you are saying David, I am trying to have an array without defining a size (hence 'x').

I'm not really sure you do. If you define "numbers" as an Array it isn't going to let you run it as a function. When you write numbers(x) it's going to attempt to execute your array as a function, and it isn't one--it's an array. Firebug console:

>>> var numbers = new Array()
>>> numbers
[]
>>> numbers(1)
TypeError: numbers is not a function source=with(_FirebugCommandLine){numbers(1)\n};

If you're trying to add a number to the numbers array, in other words the length of the array will increase by one every time you add a number, then you need to do something similar to:

>>> numbers
[]
>>> numbers[numbers.length]=5
5
>>> numbers
[5]

Or, alternatively:

>>> numbers.push(42)
2
>>> numbers
[5, 42]

The second issue is the following:

numbers = numbers(x);

This *overwrites* your array--now not only do you not have a function, you don't have an array anymore.

(Or at least you wouldn't if you weren't getting a JavaScript exception when you tried to execute an array.)

[Heather Rose]

Alright, so I was playing with it a little more, and I got the numbers to work, but now it's a style sheet issue. Should be pretty simple, but I'm having a hard time figuring it out.

Now, I'm trying to make the numbers go ACROSS, not down. Now on the edges, I'm trying to make rounded, so I'm using an image background (basically just corners) for that. BUT, I want the background of that div to be the same color as the image. Is there a way to stretch the image so that I can do that?

Here's what I did for making the numbers work correctly:

var container = document.getElementById("container");
	var index = 0;

  	function addNumber() {
		var innerDiv = document.createElement("DIV");
		
		innerDiv.id = "numberDiv" + index;
		innerDiv.innerHTML = index;
		innerDiv.className = "numberDiv";
		
		container.appendChild(innerDiv);
		
		index += 1;
  	}

  	function removeNumber() {
	  	if (index == 0) return;
	  	
	  	index -= 1;
	  	
	  	var innerDiv = document.getElementById("numberDiv" + index);
	  	container.removeChild(innerDiv);
  	}  
  	
  	function clearNumbers() {
	  	if (index == 0) return;
	  	
	  	for (var i=0; i < index; i++){
		  	var innerDiv = document.getElementById("numberDiv" + i);
		  	if (innerDiv)
		  		container.removeChild(innerDiv);
  		}
  		
  		index = 0;
  	}	  
  		

[Eric Pascarello]

A div is a block element.
A span is an inline element.

Eric