1. 首页
  2. 问答
  3. 事件处理程序onclick不工作在JavaScript

事件处理程序onclick不工作在JavaScript

2017-02-14 91 views
0

作为我的大学的任务，我做了这个简单的静态登录表单使用JavaScript和HTML，但有一个Even Handler onclick这是不工作，我尝试了所有可能的解决方案，我试图起诉标签来制作按钮，但仍然不起作用。请帮助我，我犯了错误。下面是我的代码：事件处理程序onclick不工作在JavaScript

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

来源

2017-02-14 Khubaib Khawar

+0

检查浏览器控制台中的错误 – scaisEdge

+0

代码是fin è？ –

+0

似乎是正确的..但你已经检查浏览器控制台的错误？ – scaisEdge

回答

0

所以这里有两个问题：第一个是在你尝试在“checkEmailField”功能来访问您的电子邮件字段的值的方式。您想要访问文档对象的表单属性，然后访问您的特定表单，最后访问您想要的字段。我不确定你为什么还有“发件人” - 我猜这是一个错字。

第二个问题是您的表单中只有这一个按钮。默认情况下，浏览器会使用这个单独的按钮作为“提交”按钮。当你点击按钮时，无论如何，表单都会提交。如果电子邮件为空，您希望阻止提交。您可以通过在“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>

希望这有助于！

来源

2017-02-14 21:02:48 MacPrawn

+0

非常感谢你的朋友，这就是我想要的。其实我正在寻找一种不使用任何变量或任何其他东西的方式。因为，我们的教授只教给我们使用函数的主题，而我不想使用JavaScript的任何其他部分来完成它。再次感谢 –

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>

来源

2017-02-14 21:00:33

+0

已经尝试过，但没有解决问题。 –

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/

来源

2017-02-14 21:04:17 Kristoffer

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

而且，你是不是在document对象创建任何财产username因此，如果您尝试访问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>

来源

2017-02-14 21:05:16 Agalo

+0

感谢@Agalo这个工作完美，但我一直在寻找没有使用任何变量的版本。再次感谢 –

+0

是的，如果你只需要这种方式，你可以在单个语句中替换变量。使用有意义的名称可以更轻松地阅读和维护。 – Agalo

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"); 
    } 
}

来源

2017-02-14 21:12:58

0

您shoudl改变你的函数访问到元素正确

function checkEmailField() 
    { 
     var myElem = document.getElementsByName('username'); 
     if (myElem[0].value.length < 1) 
     { 
     window.alert("Caution! You did not enter your Email"); 
     } 
    }

来源

2017-02-14 21:17:54 scaisEdge

+0

或者我可以这样做 'document.forms.username.value.length <1'？ –

+0

我已更新答案getElements返回一个集合，所以你需要firts elem – scaisEdge

+0

感谢它的工作，但我正在寻找一个没有使用变量，有人发布上述答案。通过这种方式仍然非常感谢。您实际上告诉我如何使用控制台查看错误。这对我来说是新的：D谢谢 –

相关问题

 相关问题