Javascript 在不丢失数据的情况下重新绘制_Javascript_Html

Javascript 在不丢失数据的情况下重新绘制

javascript html

Javascript 在不丢失数据的情况下重新绘制,javascript,html,Javascript,Html,我正在努力学习javascript。对于一个练习，我想创建一个包含列表、文本框和按钮的页面。按下按钮会将文本添加到我的列表中。我的代码： <html> <head charset="utf-8"> <script type="text/javascript"> var array = new Array() array.push("test") function pusher() { array.p

我正在努力学习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>


var数组=新数组（）
array.push（“测试”）
函数推送器（）{
array.push（document.forms[“former”][“finput”].value）
}

对于（var i=0；i”+数组[i]+“”）

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

如果单击提交，表单将提交到某个位置，页面将刷新。这就是该值始终重置的原因，请尝试以下操作：

<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>")
 }

函数更新（）{
对于（var i=0；i”+数组[i]+“”）
}

显然，可以使用该方法更改HTML元素

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

（我想不回答问题是没有好处的）

这样更好，但我不知道如何（何时）调用update（）。我需要告诉它在我的

+=