表单提交页面重新加载，getElementById返回null，表单不起作用

Question

代码应该使用ID从表单中获取数据，并将其存储在名为studRec的数组对象中。但是，这必须全部在客户端完成，因此页面必须保留数据，以用于其他功能。

我试过添加return false;它什么都不做。

<script>
var studRec = [];
            document.getElementById("save").addEventListener("click", save); 
            document.getElementById("verify").addEventListener("click", ver);
            function save(){
                var x = document.getElementsByClassName("fsubj");

                studRec[studRec.length] =  {
                    section: document.getElementbyId("section").value,
                    name: document.getElementbyId("name").value,
                    gender: document.getElementbyId("gender").value,
                    age: document.getElementbyId("Age").value,
                    subjects: x 
                }
                console.log(studRec);
            }
</script>

它应该在控制台中登录表单中的信息。

Answer 1

更改save方法以接受单个输入参数，即事件实例传递click事件，然后使用preventDefault：

function save(e) {
  e.preventDefault();
  ...
}

见here for more info

完整答案：

var studRec = [];
document.getElementById("save").addEventListener("click", save); 
document.getElementById("verify").addEventListener("click", ver);
function save(e){
  e.preventDefault();

  var x = document.getElementsByClassName("fsubj");

  studRec[studRec.length] =  {
      section: document.getElementbyId("section").value,
      name: document.getElementbyId("name").value,
      gender: document.getElementbyId("gender").value,
      age: document.getElementbyId("Age").value,
      subjects: x 
  }
  console.log(studRec);
}