事件处理程序onclick无法在JavaScript中工作

时间：2017-02-14 20:47:46

标签： javascript onclick event-handling

作为我大学的任务，我使用JavaScript和HTML制作了这个简单的静态登录表单，但是有一个Even Handler onclick无效，我尝试了所有可能的解决方案，我试图起诉标签制作按钮同样，但仍然无法正常工作。请帮助我，我在做错误的地方。以下是我的代码：

<html>
<head>
    <title> Test File </title>

    <script>

        function checkEmailField()
        {
            if (document.username.sender.value.length < 1)
            {
            window.alert("Caution! You did not enter your Email");
            }
        }
    </script>

</head>

<body bgcolor="pink">

    <table align="center">
            <tr>
                <td align="center">
                    <b> <h1> Fill the following form to log in: </h1> </b>

                    <form name="logIn" method="post" action="sendMailScriptURL">
                        <table border="1">
                            <tr>
                                <td> <b> Email: </b> </td>
                                <td> <input type="text" name="username" size="50"> <br> </td>
                            </tr>

                            <tr>
                                <td> <b> Password: </b> </td>
                                <td> <input type="password" name="password" size ="50"> </td>
                            </tr>

                            <tr>
                                <td> <b> Logging in from: </b> </td>
                                <td>    
                                    <input type="radio" name="from" value="campus"> Campus <br>
                                    <input type="radio" name="from" value="home"> Home                      
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I am using: </b> </td>
                                <td>
                                    <select name="OS" size="1">
                                        <option value="Windows" selected> Windows
                                        <option value="Linux/UNIX"> LINUX/UNIX
                                        <option value="Mac OSX"> Mac OSX
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I have: </b> </td>
                                <td>
                                    <input type="checkbox" name="have" value="Computer"> Computer <br>
                                    <input type="checkbox" name="have" value="Mobile"> Mobile <br>
                                    <input type="checkbox" name="have" value="Printer"> Printer <br>
                                    <input type="checkbox" name="have" value="Scanner"> Scanner
                                </td>
                            </tr>

                            <tr>
                                <td> <button onclick="checkEmailField()"> Log In </button></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
</body>
</html>

6 个答案:

答案 0 :(得分：0)

将您的javascript代码放在<body>标记的结尾之前，这应该可以解决js函数调用的问题。

<html>
<head>
    <title> Test File </title>

</head>

<body bgcolor="pink">

    <table align="center">
            <tr>
                <td align="center">
                    <b> <h1> Fill the following form to log in: </h1> </b>

                    <form name="logIn" method="post" action="sendMailScriptURL">
                        <table border="1">
                            <tr>
                                <td> <b> Email: </b> </td>
                                <td> <input type="text" name="username" size="50"> <br> </td>
                            </tr>

                            <tr>
                                <td> <b> Password: </b> </td>
                                <td> <input type="password" name="password" size ="50"> </td>
                            </tr>

                            <tr>
                                <td> <b> Logging in from: </b> </td>
                                <td>    
                                    <input type="radio" name="from" value="campus"> Campus <br>
                                    <input type="radio" name="from" value="home"> Home                      
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I am using: </b> </td>
                                <td>
                                    <select name="OS" size="1">
                                        <option value="Windows" selected> Windows
                                        <option value="Linux/UNIX"> LINUX/UNIX
                                        <option value="Mac OSX"> Mac OSX
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I have: </b> </td>
                                <td>
                                    <input type="checkbox" name="have" value="Computer"> Computer <br>
                                    <input type="checkbox" name="have" value="Mobile"> Mobile <br>
                                    <input type="checkbox" name="have" value="Printer"> Printer <br>
                                    <input type="checkbox" name="have" value="Scanner"> Scanner
                                </td>
                            </tr>

                            <tr>
                                <td> <button onclick="checkEmailField()"> Log In </button></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
    <script>

        function checkEmailField()
        {
            if (document.username.sender.value.length < 1)
            {
            window.alert("Caution! You did not enter your Email");
            }
        }
    </script>
</body>
</html>

答案 1 :(得分：0)

所以这里有两个问题：第一个问题就是你试图在“checkEmailField”函数中访问你的电子邮件字段的值。您想要访问文档对象的forms属性，然后访问您的特定表单，最后访问您想要的字段。我不知道为什么你也有“发送者” - 我猜这是一个错字。

第二个问题是表单中只有一个按钮。默认情况下，为了更好，浏览器将使用此单个按钮作为“提交”按钮。当您点击按钮时，无论如何都会提交表单。如果电子邮件为空，您希望阻止提交。您可以通过在“checkEmailField”函数中返回false并在onclick处理程序中返回函数的返回值来执行此操作。

请尝试使用此版本：

<html>
<head>
    <title> Test File </title>

    <script>

        function checkEmailField()
        {
            if (document.forms.logIn.username.value.length < 1)
            {
            window.alert("Caution! You did not enter your Email");
            return false;
            }
            return true;
        }
    </script>

</head>

<body bgcolor="pink">

    <table align="center">
            <tr>
                <td align="center">
                    <b> <h1> Fill the following form to log in: </h1> </b>

                    <form name="logIn" method="post" action="sendMailScriptURL">
                        <table border="1">
                            <tr>
                                <td> <b> Email: </b> </td>
                                <td> <input type="text" name="username" size="50"> <br> </td>
                            </tr>

                            <tr>
                                <td> <b> Password: </b> </td>
                                <td> <input type="password" name="password" size ="50"> </td>
                            </tr>

                            <tr>
                                <td> <b> Logging in from: </b> </td>
                                <td>    
                                    <input type="radio" name="from" value="campus"> Campus <br>
                                    <input type="radio" name="from" value="home"> Home                      
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I am using: </b> </td>
                                <td>
                                    <select name="OS" size="1">
                                        <option value="Windows" selected> Windows
                                        <option value="Linux/UNIX"> LINUX/UNIX
                                        <option value="Mac OSX"> Mac OSX
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I have: </b> </td>
                                <td>
                                    <input type="checkbox" name="have" value="Computer"> Computer <br>
                                    <input type="checkbox" name="have" value="Mobile"> Mobile <br>
                                    <input type="checkbox" name="have" value="Printer"> Printer <br>
                                    <input type="checkbox" name="have" value="Scanner"> Scanner
                                </td>
                            </tr>

                            <tr>
                                <td> <button onclick="return checkEmailField();"> Log In </button></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
</body>
</html>

希望这有帮助！

答案 2 :(得分：0)

document.username无法匹配任何内容，因此您会收到错误：Cannot read property 'sender' of undefined。您必须使用遍历方法在DOM中查找它。最简单的可能是在用户名输入字段中添加id：input id="username" name="username"，然后使用document.getElementById（或者您可以使用document.querySelector）。这是一个快速的jsFiddle：https://jsfiddle.net/tztyky6g/

答案 3 :(得分：0)

更改代码document.username.sender.value.length < 1

要 var email = document.forms[0].elements["username"].value;

document对象包含forms属性，因为在此HTML中您有1个表单，因此您可以像document.forms[0]一样访问它，然后您需要访问username 输入，可以使用document.forms[0].elements["username"]

完成

此外，您没有在username对象上创建任何属性document，因此如果您尝试访问document.username，则会返回undefined，因为没有属性名称username存在于document对象中。

完整代码： 

<html>
<head>
    <title> Test File </title>

    <script>

        function checkEmailField()
        {
            var email = document.forms[0].elements["username"].value;
            if (email.length < 1)
            {
                 window.alert("Caution! You did not enter your Email");
                 return false;
            }
        }
    </script>

</head>

<body bgcolor="pink">

    <table align="center">
            <tr>
                <td align="center">
                    <b> <h1> Fill the following form to log in: </h1> </b>

                    <form name="logIn" method="post" action="sendMailScriptURL">
                        <table border="1">
                            <tr>
                                <td> <b> Email: </b> </td>
                                <td> <input type="text" name="username" size="50"> <br> </td>
                            </tr>

                            <tr>
                                <td> <b> Password: </b> </td>
                                <td> <input type="password" name="password" size ="50"> </td>
                            </tr>

                            <tr>
                                <td> <b> Logging in from: </b> </td>
                                <td>    
                                    <input type="radio" name="from" value="campus"> Campus <br>
                                    <input type="radio" name="from" value="home"> Home                      
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I am using: </b> </td>
                                <td>
                                    <select name="OS" size="1">
                                        <option value="Windows" selected> Windows
                                        <option value="Linux/UNIX"> LINUX/UNIX
                                        <option value="Mac OSX"> Mac OSX
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td> <b> I have: </b> </td>
                                <td>
                                    <input type="checkbox" name="have" value="Computer"> Computer <br>
                                    <input type="checkbox" name="have" value="Mobile"> Mobile <br>
                                    <input type="checkbox" name="have" value="Printer"> Printer <br>
                                    <input type="checkbox" name="have" value="Scanner"> Scanner
                                </td>
                            </tr>

                            <tr>
                                <td> <button onclick="checkEmailField()"> Log In </button></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
</body>
</html>

答案 4 :(得分：0)

  1. 从表单标记中删除method和action。
  2. 将;添加到onclick事件中，如下所示：checkEmailField();

  3. 将javascript部分更改为此选项以检查电子邮件字段：

    function checkEmailField() {
    var emailField = document.querySelector('input[name="username"]');

    if (emailField !== null && emailField.value === "")
    {
        window.alert("Caution! You did not enter your Email");
    }
}

答案 5 :(得分：0)

你应该改变你以正确的方式访问元素的功能

listView
相关问题
最新问题