在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>

当用户要存储值时，我只添加了“登录”功能