Question

我正在尝试学习javascript。对于练习，我想制作一个包含列表，文本框和按钮的页面。按下按钮会将文本添加到我的列表中。我的代码：

<html>
<head charset="utf-8">
   <script type="text/javascript">
      var array = new Array()
      array.push("test")

      function pusher() {
         array.push( document.forms["former"]["finput"].value )
      }
   </script>
</head>
<body>
   <form name="former" onsubmit="pusher()">
      <input type="text" name="finput" />
      <input type="submit" value="Submit" />
   </form>

   <ul type="disc">
      <script type="text/javascript">
         for (var i = 0; i < array.length; i++)
            document.write("<li>"+array[i]+"</li>")
      </script>
   </ul>
</body>
</html>

如果我将push（）添加到pusher（），我会看到每次单击提交时都会重置元素。那么，如何在不重置数组值的情况下重新绘制列表？

Answer 1

如果您点击提交，表单将提交到某个地方，页面将刷新。这就是为什么值总是被重置的原因，试试这个：

<form name="former">
  <input type="text" name="finput" />
  <input type="submit" value="Submit"  onclick="pusher();return false;"/>
</form>

但请注意，这不会更新输出，您可以将更新包装在函数中并在适当的时候调用它：

 function update(){
     for (var i = 0; i < array.length; i++)
        document.write("<li>"+array[i]+"</li>")
 }

Answer 2

显然可以使用方法

更改HTML的元素

document.getElementById("my_element_id").innerHTML = "new HTML code"

（认为保留一个未回答的问题并不好）

重绘不会丢失数据

2 个答案: