时间戳

首页 > 解决方案 > 表单提交时页面重新加载，getElementById 返回 null，表单不工作

javascript - 表单提交时页面重新加载，getElementById 返回 null，表单不工作

问题描述

该代码应该使用 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>

它应该登录到控制台中输入表格的信息。

标签： javascripthtmladdeventlistenergetelementbyidarrayobject

解决方案

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

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

请参阅此处了解更多信息

完整答案：

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

推荐阅读