adding items using div id

displaying information

[susieone]

I would like the user to click the button in the middle column and have the item value displayed in the right column. any help please.

<div id="middle">

<button type="button" id="41141" value="hat1.hat">Add</button>

<div id="right">
<h2>Your cart:</h2>
<div class="cartitems" id="itemlist">
</div>

[Span]

Hi,
not really a CSS question. But you could try this:

<script type="text/javascript">
function cart(){
bttn = document.getElementById("41141").value;
document.getElementById("itemlist").firstChild.nodeValue=bttn;
}
</script>

<div id="middle"><button type="button" id="41141" value="hat1.hat" onclick="cart();">Add</button></div>

<div id="right"><h2>Your cart:</h2>
<div class="cartitems" id="itemlist">Empty</div> 
</div> 

[susieone]

Thanks Span.
a newbie to this javascript and using CSS, I have been used to HTML,WYSIWIG, and FRAMES but I like the look that CSS can create.
Thanks.

[susieone]

hi again
I have used your script and modified it as below to simulate adding one product to the cart. It works as should in firefox and netscape but not in IE (alert message is: add has been added to your cart.) in forefox/netscape the correct value is returned(hat1 has been added to your cart)any suggestions please.

How would I call different items if I wanted to expand the array? without using the [0]¦¦ [1].this part should call any item in the array and not a specific array number.
Hope I am explaing myself ok.

<!-- Middle (main) column contents -->
<div id="middle">
<h2>My header.</h2>
<script language="javascript" type="text/javascript">

var item = new Array(); //create array to store items
item[0] = "hat1";

function addToCart(item) { //add to cart function
item=document.getElementById(item[0]).value; //get value of item
document.getElementById("itemlist").firstChild.nodeValue=item; //add item value to child node, in this case item list
alert(item + " has been added to your cart!");
}

function removeItem(item) { //remove item from cart
item=document.getElementById(item[0]).value;
remove=document.getElementById("itemlist").firstChild.nodeValue=null;//update child
alert(item + " has been removed from your cart!");
}

</script>
button.....onclick="addToCart(item)"