Question

我正在尝试制作一个简单的注册/登录系统，但是当我同时按下两者的按钮时，它并没有完成我需要做的事情。

我放

alert("I work!");

在每个函数的开头

应该起作用，以查看它是否实际上被触发了，但是没有触发。我还检查了两者的onclick事件是否都正确引用了。我什至尝试将实际脚本复制到html文件中，以确保这不是参考问题。在这一点上，我真的很困，如果这是语法错误，它不会提醒我并且我也不知道。

代码为：

index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Opportunities</title>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="/js/script.js"></script>
    </head>
    <body>
        <p>Uwu</p>

        <form>
            <p>Username <input type="text" class="username" /></p>
            <p>Password <input type="password" class="password" /></p>
            <button onclick="loginUser()">Login</button>
        </form>

        <p>Not yet registered? <a href="/register">Click here to create an account.</a> </p>
    </body>
</html>

registration.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Register</title>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src=/js/script.js"></script>
    </head>
    <body>
        <p>Registration page</p>

        <form>
            <p>Username <input type="text" class="username" /></p>
            <p>Password <input type="password" class="password" /></p>
            <button onclick="registerUser()">Register</button>
            <!--onclick event doesn't work-->
        </form>

        <p><a href="/">Click here to go back.</a></p>
    </body>
</html>

和script.js：

var url = "http://localhost:8888";

function test(){
    console.log('hello');
}

function registerUser(){
    alert("I work!");
    var username = document.getElementbyClassName("username");
    var password = document.getElementbyClassName("password");

    $.ajax{(
        url: url + "/register",
        method: "post",
        data: {
            username: username[0].value,
            password: password[0].value
        }
        success: function(respons){
            alert(response.message);
        }
    }).error(function(response){
        alert(response.message);
    });
}

function loginUser(){
    alert("I work!");
    var username = document.getElementbyClassName("username");
    var password = document.getElementbyClassName("password");

    $.ajax({
        url: url + "/login",
        method: "post",
        data: {
            username: username[0].value,
            password: password[0].value
        }
    }).success(function(response){
        alert(response.message);
    }).error(function(response){
        alert(response.message);
    });
}

每当我按下每个按钮时，它只会清除输入中的文本，但不会像我打算的那样发出警报。请告诉我该检查什么。谢谢。

Answer 1

我认为您的脚本未加载

从

删除第一个反斜杠（'/'）

  <script type="text/javascript" src=/js/script.js"></script>

Answer 2

如果您使用的是浏览器，我将首先尝试您没有任何“弹出”脚本阻止扩展，我遇到了同样的问题，问题是chrome popup js阻止程序导致简单的adblocker在某些网站上不起作用。

欢呼

Answer 3

看起来像registerUser()函数中的错字，尝试将ajax调用更改为

$.ajax({
    url: url + "/register",
    method: "post",
    data: {
        username: username[0].value,
        password: password[0].value
    },
    success: function(respons){
        alert(response.message);
    }
}).error(function(response){
    alert(response.message);
});

Javascript中的按钮onclick事件不会触发警报

3 个答案: