在HTML中調用JavaScript函數

Question

我正在使用javascript和html。 我有一個稱為登錄的javascript函數，我想用HTML調用此函數。 我看到了一些直接在HTML中包含javascript函數的代碼。 我不想這樣做，因為代碼很長。 這是HTML：

<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password">
<script>
    window.onload = login()
</script>
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" type="submit">

Javascript函數是：

function login(){

    var userName = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    console.log(userName);
    console.log(password);
    var data = {
        userName : userName,
        password : password
    };
    console.log(data);
    doJSONRequest("POST", "/login", {}, data, function(location){
        document.location = location.location;
    });
    }

我包括一個window.onload，因為我想在頁面啟動時調用該函數。 控制台（顯然）對我說“未定義登錄”，當然，這是有原因的。 但是我不想將所有代碼都放到HTML中（也是因為多了30行）。 你能幫我嗎？ 謝謝大家 ：）

Answer 1

將JavaScript放在另一個js文件（例如filename.js）中，然后將其加載到標頭中。

<script src="path to the file"></script>

另外，您還必須將window.onload = login()更改為window.onload = login

window.onload需要功能的引用。 當您使用window.onload = login()時， login()函數的返回值設置為不正確的引用。 函數名稱login是參考。

Answer 2

我認為您想要的是在用戶單擊按鈕時運行您的登錄代碼。 您可以這樣進行：

<form>
    <input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
    <input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password">
    <input class="btn btn-beats btn-block btn-stacked" value="Tune in" onclick="login()">
</form>
<script src="login.js></script>

login.js：

   function login(){

      var userName = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      console.log(userName);
      console.log(password);
      var data = {
                userName : userName,
                password : password
      };
      console.log(data);
      doJSONRequest("POST", "/login", {}, data, function(location){
          ...
      });

Answer 3

解

為了與其他用戶保持正確，這是我的解決方案：

 <form action="login.html" method="POST" class="form-signup">
    <input class="form-control form-stacked" name="firstname" placeholder="Firstname" type="text" required="true">
    <input class="form-control form-stacked" name="lastname" placeholder="Lastname" type="text" required="true">
    <input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username" onkeyup="login()">
    <input class="form-control form-stacked" name="email" placeholder="email" type="email" required="true">
    <input class="form-control form-stacked" name="password" id = "password" placeholder="Password" type="password" required="true" onkeyup="login()">
    <input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password" onkeyup="enable()" required="true">
    <input class="btn btn-beats btn-block btn-stacked" value="Sign up" id = "btnPlaceOrder" type="submit">
  </form>

當用戶要存儲值時，我只添加了“登錄”功能