Javascript initializtion code running multiple times

Question

I have an html button element that has an attribute onclick="onprof()" which correctly gets called. The button is above the <script> element which is the last thing before the </body> tag. I set a breakpoint at the line that contains the code var product = [] which gets activated on the page reload. I then hit the button which calls the function (I also have a breakpoint there) and that works fine, but then it goes to my original breakpoint and ends up breaking the code because it reinitializes the value of my variable product. Why is that Javascript being called again and how can I not get it to be called?

       <script type="text/javascript">

            var product = [];
            var temp=[]; 
            temp.push(1);
            temp.push("PET");
            product.push(temp);
            temp = [];
            temp2 = [];
            function onprof()
            {
               //alert(product);
                document.getElementById("typeform").innerHTML = product.toString();
            }
            function onprod()
            {

            }
            function onser()
            {

            }

        </script>

Answer 1

Looks like you have a form which contains the button. On submit, forms reload the page. You can disable this behaviour by either:

1. Set the button type as type="button". By default, it is submit.

or

2. Return false from your onprof function and use onclick="return onprof()".