Перезагрузка страницы при отправке формы, getElementById возвращает ноль, форма не работает

Question

Код должен брать данные из формы, используя идентификаторы, и сохранять их в объекте массива с именем 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();
  ...
}

См. здесь для получения дополнительной информации

Полный ответ:

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