在html中调用javascript函数

我正在研究javascript和html。我有一个javascript函数，叫做login，我想在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">

---

我包括一个window.onload，因为我想在页面启动时调用该函数。控制台（不知不觉地）告诉我“登录未定义”，当然，这是有原因的。但是我不想把所有的代码都放到HTML中（因为还有30行）。你能帮我吗？感谢大家：）

将javascript放在另一个js文件（例如：filename.js）中并加载到头中

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

您还必须将

window.onload=login（）

更改为

window.onload=login

---

window.onload

需要函数的引用。使用

window.onload=login（）

时，

login（）

函数的返回值被设置为不正确的引用。函数名

login

是参考。

我认为您想要的是在用户单击按钮时运行登录代码。您可以这样做：

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

解决方案

为了与其他用户保持一致，这里是我的解决方案：

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

---

我只是在用户想要存储值时添加了函数“login”

您是否正在寻找

脚本
标记的名称？您不想在用户输入用户名和密码后调用login吗？另外，
window.onload=login（）
应该是
window.onload=login
。您不想调用该函数，您想将其分配给
onload
，以便浏览器可以调用它。是@Cfreak我想在用户输入用户名和密码以检查数据库中是否存在时调用它确定。这是一个很好的观点@FelixKling谢谢我想把所有的HTML页面都放进去太久了你把它放在标签里了吗？你的路径是正确的？你确定js文件被加载了吗？因为我有另一个函数在那里，它可以工作，我知道它不工作，因为我放了一个控制台日志，在控制台我没有任何东西是的M.页面，但正如我已经说过的“我不想添加整个函数（超过100行）我问HTML中是否有调用此函数的方法，因为我知道如何使用HTML中的函数更新我的编辑。我以为你的意思是“不在按钮的代码内”“。抱歉。我看到了。我正在尝试您的解决方案。通过javascript文件加载它是加载javascript代码的标准而有效的方法。它仍然不起作用，因为我放了一个console.log，但我没有看到它。”
   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){
          ...
      });

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