1. 首頁
  2. 問答
  3. 事件處理程序onclick不工作在JavaScript

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

2017-02-14 90 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謝謝 –

相關問題

 相關問題