Question

我正在研究javascript和html。我有一个名为login的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>

我只是在用户想要存储值

时添加“login”功能

在html中调用javascript函数

3 个答案: