Javascript 无法在Chrome中设置断点_Javascript_Html

Javascript 无法在Chrome中设置断点

javascript html

Javascript 无法在Chrome中设置断点,javascript,html,Javascript,Html,为了便于学习，我编写了一个简单的javaScript函数，使用JS验证所需的用户名字段我面临两个问题- 在submit按钮中，onclick事件处理程序不调用 checkRequired方法，表单被发回我无法在chrome调试器中设置断点即使只在代码中使用调试器，也不会带来控制调试器断点 TaskManager.js function checkRequired() { debugger; var userName = document.getElementById("t

为了便于学习，我编写了一个简单的javaScript函数，使用JS验证所需的用户名字段

我面临两个问题-

在submit按钮中，onclick事件处理程序不调用

checkRequired

方法，表单被发回

我无法在chrome调试器中设置断点

即使只在代码中使用调试器，也不会带来控制调试器断点

TaskManager.js

function checkRequired() {
    debugger;
    var userName = document.getElementById("txtUserName");
    if (userName.length == 0) {
        alert("username is required attribute");
        return false;
    }
    return true;
}

添加新用户：

<html>
<head>
    <title>Add new User</title>
    <style type="text/css" media="all">
        button {
            width: 65px;
        }
    </style>
    <script src="TaskManager.js" type="text/javascript"></script>
</head>
<body>
    <form method="post" action="AddNewUser.html" style="width: 560px; height: 850px; margin-left: 10px; margin-top: 10px">
        <fieldset>
            <legend>New User</legend>
            <table>
                <tr>
                    <td>
                        <label>User Name:</label></td>
                    <td>
                        <input type="text" id="txtUserName" name="User Name" maxlength="10" /></td>
                </tr>

                <tr>
                    <td>
                        <button id="btnSubmit" type="submit" onclick="checkRequired()">Add User</button>
                    </td>
                    <td>
                        <button id="btnCancel">Cancel</button>
                    </td>
                </tr>

            </table>
        </fieldset>

    </form>

</body>
</html>


添加新用户
钮扣{
宽度：65px；
}
新用户
用户名：
添加用户
取消

感谢您为解决此问题提供的帮助。

如果未达到断点，则无法访问该函数，您应该会在控制台中看到一个错误。该功能是否在全局范围内

，对此我做了一些更改，以使其正常工作。首先，必须考虑处理程序的结果：

<button id="btnSubmit" type="submit" onclick="javaScript:return checkRequired();">

无论如何，如果可能的话，我建议您使用一种不引人注目的方法，直接在javascript代码中绑定事件，而不是在标记中定义它：

var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
    console.log('aho');
    var userName = document.getElementById("txtUserName");
[...]

检查脚本文件是否正在加载。在函数定义之外的文件顶部放置警报

如果警报未显示，请仔细检查脚本文件的名称。它是否与脚本标记中引用的相同？它是否在同一目录中？

您是否检查了控制台中的错误？是的，我在控制台中没有看到任何错误。

var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
    console.log('aho');
    var userName = document.getElementById("txtUserName");
[...]