JavaScript: list not displaying

Question

simple enough I guess but I am a total newbie in this. I tried doing this in PHP but then reconsidered to do it in JS, so I need some help. The code:

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
function reply_click(clicked_id)
{
    alert(clicked_id);
    var basketItems=new Array();
    //var i = 0;
    basketItems[1] = clicked_id;

}


</script>
</head>
<body>



    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1">
        <tr>
            <td align="center"><input onClick="reply_click(this.name)"  name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)"  name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td>
        <tr>        
    </table>


<div style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;">
<script type="text/javascript">
var counter=0;
for (counter=0; counter<basketItems.length; counter++)
   document.write(basketItems[counter] + "<br>");
</script>
</div>
<br><br><br>

Now what I expected to happen. I click the button, the alert comes out with button name clicked...then it adds that to list. Following it displays that list in the div tag. What happened wrong? it just displays the alert but nothing is shown in the div tag so am assuming something wrong with inserting to array or printing...

Thanks,

UPDATE: This code seems to work on jsfiddle but not on my broswer...any clue what different is there?

<html>
<head>
    <title>Test</title>
<script type="text/javascript">
var basketItems = [];

function reply_click(clicked_id)
{
    alert(clicked_id);
    basketItems.push(clicked_id);

    var html = '';
    for(var i = 0; i < basketItems.length; i++) {
        html += basketItems[i] + '<br/>';   
    }

    document.getElementById('list').innerHTML = html;
}
</script>
</head>
<body>



    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1">
        <tr>
            <td align="center"><input onClick="reply_click(this.name)"  name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)"  name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td>
        <tr>        
    </table>


<div id="list" style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;">

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

and the JS fiddle link is: http://jsfiddle.net/fVQVy/ as posted here as a solution And thanks all for your patience...greatly appreciated....

mplungjan · Accepted Answer · 2012-04-12 06:00:34Z

2

Try this DEMO

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
    var basketItems=[];

function reply_click(clicked_id) {
   var html = "";
   basketItems.push(clicked_id);
   for (var counter=0; counter<basketItems.length; counter++) 
      html += basketItems[counter] + "<br>";
   // or as posted html = basketItems.join('<br/>');
   document.getElementById("result").innerHTML = html;
}


</script>
</head>
<body>

Also make it a button and not submit since that may reload the page

    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1">
        <tr>
            <td align="center"><input onClick="reply_click(this.name)"  name="shirt" value="shirt" style="width:200px; height:100px;" type="button"/></td>
        <tr>        
    </table>


<div id="result" style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;">

</div>
<br><br><br>

UPDATE

Here is how to just add to the result

function reply_click(clicked_id) {
   basketItems.push(clicked_id);
   document.getElementById("result").innerHTML+=clicked_id+'<br/>';
}

UPDATE to handle duplicates

var basketItems=[];

function reply_click(clicked_id) {
   if (basketItems.indexOf(clicked_id)==-1) basketItems.push(clicked_id);
   document.getElementById("result").innerHTML = basketItems.join("<br>");
}


// handle duplicates
if(!Array.indexOf) {
  Array.prototype.indexOf = function(obj){
    for(var i=0; i<this.length; i++){
      if (this[i]==obj) return i;
    }
    return -1;
  }
}

edited Apr 12, 2012 at 6:00

answered Apr 11, 2012 at 20:57

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sys_debug Over a year ago

Thanks that does it...I get the first item as undefined though. What about if I want to maintain the state of the list, so that when I press the next button it adds to list rather than rebuild it? Thanks very much

sys_debug Over a year ago

I sorted the undefined part...just insert at 0 rather than 1. How about the rest?

mplungjan Over a year ago

Please see update. Also change submit to button - I need to go to bed. 11pm here.

sys_debug Over a year ago

you might be sleeping already but just to let you know this is not working...it just doesn't do anything anymore..oh well we have tomorrow

sys_debug Over a year ago

Aye thanks that's working right now....I really appreciate your effort sir. Good day

|

Ruan Mendes · Accepted Answer · 2012-04-11 20:53:26Z

1

By the time reply_click is called, Your script that called document.write has already executed.

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">

    var basketItems = [];
    function reply_click(clicked_id)  {
      // This does not handle duplicate clicks, leave that up to you
      basketItems.push(clicked_id);
      var out = document.getElementById('output');
      out.innerHTML = basketItems.join('<br/>');
    }
</script>
</head>
<body>
    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1">
        <tr>
            <td align="center"><input onClick="reply_click(this.name)"  name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)"  name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td>
        <tr>
        <tr>
            <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td>
            <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td>
        <tr>        
    </table>


<div id='output' style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;">

</div>

answered Apr 11, 2012 at 20:53

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

4 Comments

mplungjan Over a year ago

+1 for the push and join. I keep forgetting those when I fix other's scripts

sys_debug Over a year ago

Any idea why the list is not showing from the above comment since you updated the answer?

Ruan Mendes Over a year ago

@sys_debug Who is your question directed to?

sys_debug Over a year ago

Hello Juan, sorry for late answer but it was to you...I was hoping you could help that's all :)

xcopy · Accepted Answer · 2012-04-11 21:02:16Z

1

You are recreating the array every time you execute reply_click(). Furthermore, the script at the bottom is only executed once during page load. Please see the following working example - http://jsfiddle.net/fVQVy/

answered Apr 11, 2012 at 21:02

xcopy

2,26019 silver badges24 bronze badges

4 Comments

sys_debug Over a year ago

This code does exactly what I want in jsfiddle but doesn't work in my copy... :(

Ruan Mendes Over a year ago

@sys_debug doesn't work without an explanation shows very little effort. What kind of error are you getting? Where's the new code?

sys_debug Over a year ago

Well basically it works there, so I thought it should work anywhere else...just an assumption. I am still looking at it now

sys_debug Over a year ago

@JuanMendes I am updating my question with the new code which is supposed to work... :)

Josh · Accepted Answer · 2012-04-11 21:05:10Z

1

Your basketItems array is going to be initialized to an empty array every time your function is called, overwriting the previous entries. Also, you're not adding to it, you're overwriting the second entry (key 1), every time.

Move it outside of the function, into a global scope.

EDIT: A fiddle for you: http://jsfiddle.net/3v4W2/1/

edited Apr 11, 2012 at 21:05

answered Apr 11, 2012 at 20:53

Josh

12.6k12 gold badges77 silver badges118 bronze badges

Comments

Anurag Uniyal · Accepted Answer · 2012-04-11 20:52:52Z

0

Your document.write code is executed once when the page is loaded, and at that time baskeItems is empty.

If you want to dynamically update the page on each click, you should create a function which updates the document, call that function every-time on click

answered Apr 11, 2012 at 20:52

Anurag Uniyal

89.2k41 gold badges181 silver badges223 bronze badges

2 Comments

Jaime Over a year ago

Actually basketItems in the loop is always empty, the basketItems is a local variable of the reply_click function

sys_debug Over a year ago

as I said am a total newbie in this case, so can you please help illustrate how that is done...once taught, always will know how to do it and recall upon it :)

Collectives™ on Stack Overflow

JavaScript: list not displaying

5 Answers 5

6 Comments

4 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

4 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related