array resetting itself javascript

Question

i am just beginning javascript so i decided to make a program that accepts values from the user on a button click and stores them in an array of object and on click of another button show writes them to the innerHTML of a paragraph

<!DOCTYPE HTML>
<html>
<head>
<script>
var records = new Array();
var counter = 0;
var t = document.getElementById("show");
function record(name,age,cla)
{
this.name=name;
this.age=age;
this.cla=cla;
}
function add()
{
var r1 = new record(frm1.name.value,frm1.age.value,frm1.clas.value);
alert(r1.name);
records.push(r1);
alert(records[0].name);
}
function show()
{alert(records.length);
for(var i=counter;i<records.length;i++,counter++)
 {
    t.innerHTML+= records[i].name+"    "+records[i].age+"       "+records[i].cla+"<br>";
 }
}
function clear()
{
 t.innerHTML="";
 counter=0; 
}
</script>
</head>
<body>
    <form id = "frm1" >
        name : <input type = text id = "name">
        age :  <input type = text id = "age">
        class : <input type = text id = "clas">
        <button onclick= "add()">add</button>
        <button onclick = "show()">show</button>
        <button onclick = "clear()">clear</button>
    </form><br>
    <p id = "show"></p>
</body>
</html>

so after debugging it i found out that the element is added properly but whenever i call the show method the records.length shows 0 .. why is the array resetting itself ?

score 3 · Answer 1 · edited May 23 '17 at 12:19

Three issues:

1) Your form is trying to submit when you click on one of your buttons and thus is causing the page to reload. When the page is reloaded, everything is reinitialized and thus the array is empty.

You can fix that by calling preventDefault() to prevent the default behavior of the button click.

2) You are calling document.getElementById("show") before the page has been parsed so it will always be null.

You will need to put that script element at the end of the page after the DOM has been loaded. You can actually put all your scripts at the end of the document.

3) Your clear() method name interferes with a predefined global symbol of the same name so you should change it to a different function name. This is one of the reasons why you generally want to avoid globally scoped symbols.

Here's a working demo: http://jsfiddle.net/jfriend00/ZvbS6/

Note: If you are using plain javascript, then you will have to deal with some browser differences. Older versions of IE don't support e.preventDefault(). See this prior answer for details.

hmm .. i dont quite understand how to use the prevent default so i searched and found out that if i add return false .. that also works .. why is that so and moreover coming from a c++ c# background can u suggest any sources to learn javascript ?? — B0rn2C0de, Dec 22 '13 at 21:54
@B0rn2C0de - How to do it is all in the jsFiddle working demo linked in my answer. Yes `return false` will also work in your particular case. — jfriend00, Dec 22 '13 at 21:56

array resetting itself javascript

1 Answers1