Функция Javascript вызывается многократно

Question

Недавно я столкнулся с проблемой повторного вызова функций JavaScript. У меня есть кнопка, которая будет вызывать метод JavaScript. В методе веб-страница будет отправлять и получать HTTP-запрос POST к php-скрипту. Однако веб-страница отправляет один и тот же запрос каждую секунду.

Вот скрипт:

function processLogin() {
  //console.log("requested")
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      //console.log("Hey");
      //document.body.innerHTML+= html;
      console.log("encountered");
      //xhttp.abort();
    }
  };
  xhttp.open("POST", "csc.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("uid=" + document.getElementById("username").value + "&pass=" + document.getElementById("password").value);
  event.stopPropagation? event.stopPropagation() : event.cancelBubble = true;
  return false;
}

HTML:

<div class="container" style="height:100vh!important;">

<div id="lginMain" class="jumbotron add" style="width : 50vh!important;margin:0 auto!important; float:middle!important;position:relative!important;top:25%!important;">

    <div class="form-group">
        <h1 style="font-size:30px;">Welcome back</h1>
        <br>
        <label for="email">Username:</label>
        <input type="text" class="form-control" name="username" id="username">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" name="password" id="password">
    </div>

    <button class="btn btn-primary" onClick="processLogin()">Submit</button>
</div>

Вот скриншот сетевых процессов:

Вы можете увидеть несколько вызовов, когда кнопка нажата один раз

Любая помощь будет оценена.

Answer 1

Хорошо, это была моя проблема, так как Jaromanda X сказала, что присоединение слушателя событий решит проблему.Поэтому удаление атрибута onlick и добавление прослушивателя событий решает проблему.