Question

我刚开始使用javascript所以我决定制作一个程序，在按钮点击时接受用户的值并将它们存储在一个对象数组中，点击另一个按钮show将它们写入段落的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()。有关详细信息，请参阅this prior answer。

数组重置自己的javascript

1 个答案: