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

时间:2019-04-10 15:29:04

标签: javascript html addeventlistener getelementbyid arrayobject

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

它应该将放入表单的信息登录到控制台。

1 个答案:

答案 0 :(得分: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);
}