数组自行重置javascript

Question

我只是开始使用javascript，所以我决定制作一个程序，在单击按钮时接受用户的值，并将其存储在对象数组中，然后单击另一个按钮，将其显示到段落的innerHTML中

<!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>

因此，在调试之后，我发现该元素已正确添加，但是每当我调用show方法时，records.length都会显示0 ..为什么数组会自行重置？

Answer 1

三个问题：

1）当您单击一个按钮时，您的表单正试图提交，从而导致页面重新加载。 重新加载页面后，所有内容都会重新初始化，因此数组为空。

您可以通过调用preventDefault()来防止按钮单击的默认行为来解决此问题。

2）您正在解析页面之前调用document.getElementById("show") ，因此该页面始终为null 。

加载DOM之后，您需要将该脚本元素放在页面的末尾。 实际上，您可以将所有脚本放在文档的末尾。

3）您的clear()方法名称会干扰具有相同名称的预定义全局符号，因此您应将其更改为其他函数名称。 这就是为什么您通常要避免使用全局范围的符号的原因之一。

这是一个工作示例： http : //jsfiddle.net/jfriend00/ZvbS6/

注意：如果您使用的是纯JavaScript，则必须处理一些浏览器差异。 较旧版本的IE不支持e.preventDefault() 。 有关详细信息，请参见此先前的答案。

数组自行重置javascript

问题描述

1 个解决方案

解决方案1
3 2013-12-22 20:02:38

数组自行重置javascript

问题描述

1 个解决方案

解决方案1 3 2013-12-22 20:02:38

解决方案1
3 2013-12-22 20:02:38