.push function fail to update array

Question

I can't seem to push new data in the array, and then update the output field with the new data. Probably an obvious problem, but not for my newbie skills.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="jquery-2.1.1.min.js"></script>
<title>VB</title>
</head>
<body>

<output id="crumMenuOutput"></output>
<br /><br />
<button type="button" id="test">Ny takst</button>

    <script>

        $(document).ready(function(){

            var menuArray = new Array;

            menuArray.push("test1"); // add test data to array

            $("button").click(function() {

                menuArray.push("test2"); // fail to add data on button click
                alert($(this).attr('id')); // just at test to see function working

            });

This should update OUTPUT field with more entries

            if(menuArray.lenght !== 0){
                $.each(menuArray, function(i, val) {
                    if(i == menuArray.length - 1) var spacer = ""; else var spacer = " > ";
                    $('#crumMenuOutput').append(val + spacer); 
                });
            }


        });

    </script>

</body>

</html>

You should perform the `append` inside the button's click handler. Otherwise you just append data to the array, but you don't do anything with the data, as the loop trough the menuArray is completed — Maxim Krizhanovsky, Jul 14 '14 at 13:04
@Justcode [new MyObject(); vs new MyObject;](http://stackoverflow.com/questions/3034941/new-myobject-vs-new-myobject) — t.niese, Jul 14 '14 at 13:06
Parentheses are not necessary in a `new` expression wherein no parameters are passed. — Pointy, Jul 14 '14 at 13:07
Side note : instead of alerting when you are debugging, you should use `console.log()` in the eventuality where you would forget to remove such debugging lines, it wouldn't interfere with the user experience at least. — Yan Brunet, Jul 14 '14 at 13:12

score 0 · Accepted Answer · answered Jul 14 '14 at 13:16

You just need to display the new content after you update it. It is currently outside the click so will only be called once:

JSFiddle: http://jsfiddle.net/r7jck/

 $(document).ready(function () {

     var menuArray = new Array;

     menuArray.push("test1"); // add test data to array

     $("button").click(function () {

         menuArray.push("test2"); // fail to add data on button click
         alert($(this).attr('id')); // just at test to see function working
         if (menuArray.lenght !== 0) {
             $.each(menuArray, function (i, val) {
                 if (i == menuArray.length - 1) var spacer = "";
                 else var spacer = " > ";
                 $('#crumMenuOutput').append(val + spacer);
             });
         }


     });

 });

It actually looks like part of your code is missing (in the middle)? You might want to clarify the intended aim for this code.

Thanks! There is no code missing in the middle. Added more comments to be allowed to post the questions... Inline comments were not enough apparently. The intended aim for this code is to output as an Breadcrum menu. Early stages just yet ;) — Øyvind, Jul 14 '14 at 13:44
There was really nothing wrong with your individual lines of code. Just when/how you display the state. If you need it to do more than shown, please clarify the question. Thanks :) — iCollect.it Ltd, Jul 14 '14 at 13:46

.push function fail to update array

1 Answers1