2017-08-13 57 views
0

我開始使用atom作爲我的編輯器來學習Javascript。我已經在線觀看了大量的教程,而我的代碼看起來完全像它在內部做的那樣,出於某種原因我錯過了Javascript的行爲。下面是我的代碼的一個簡單例子,它不會耗盡atom,notepad ++或notepad。在原子中我使用atom-live-server,在記事本中,我基本上在本地主機上打開它。 ANYoe有什麼想法嗎?javascript因爲某種原因想要在我的機器上執行

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <form name="login"> 
     <input type="text" placeholder="Username" name="UserID"><br> 
     <input type="text" placeholder="Password" name="Pass"><br> 
     <input type ="button" onclick="check(this.form)" value="Login"/> 
    </form> 

    <script type="text/javascript"> 
     function check(form){ 
     if(form.userId.value=="" || form.pass.value==""){ 
      alert("BLAHBLAHBLAH") 
     } 
     } 
    </script> 
</body> 
</html> 
+2

你有沒有檢查錯誤控制檯? – Carcigenicate

+0

@Jonasw東西是教程,我跟着有相同的代碼。我也通過做document.GetElementByID(「WhatEvID」)檢查它,在這種情況下,我將ID分配給用戶ID和通行證,並沒有工作要麼 – Artisan

+0

@Carcigenicate我該怎麼做 – Artisan

回答

0

另一種方法:

  • 指定ID的以及到輸入端。
  • 將按鈕傳遞給函數。
  • 獲取按鈕的父級(<form>)。
  • 使用querySelectorvalue獲得#UserID#Pass值。

<form name="login"> 
 
    <input type="text" placeholder="Username" id="UserID" name="UserID"><br> 
 
    <input type="text" placeholder="Password" id="Pass" name="Pass"><br> 
 
    <input type ="button" onclick="check(this)" value="Login"/> 
 
</form> 
 

 
<script type="text/javascript"> 
 
function check(button){ 
 
    var parent=button.parentNode; 
 
    if(parent.querySelector('#UserID').value=="" || parent.querySelector('#Pass').value==""){ 
 
    alert("BLAHBLAHBLAH") 
 
    } 
 
} 
 
</script>

0

問題是你不考慮字符的大小寫敏感度。 userIdUserId被認爲是不同的。因此form無法找到對UserId元素的引用並因此出錯。請檢查瀏覽器開發人員工具的控制檯輸出以查看錯誤。以下是固定代碼。

<p>Document</p> 
<form name="login"> 
<input name="UserID" type="text" placeholder="Username" /><br /> 
<input name="Pass" type="text" placeholder="Password" /><br /> 
<input type="button" value="Login" onclick="check(this.form)" /></form> 
<p> 
<script type="text/javascript">// <![CDATA[ 
function check(form){ 
    console.log('FORM', form) 
    if(form.UserID.value=="" || form.Pass.value==""){ 
    alert("BLAHBLAHBLAH") 
} 
} 
// ]]></script> 
</p> 

    <p>Document</p> 
<form name="login"> 
<input name="UserID" type="text" placeholder="Username" /><br /> 
<input name="Pass" type="text" placeholder="Password" /><br /> 
<input type="button" value="Login" onclick="check(this.form)" /></form> 
<p> 
<script type="text/javascript">// <![CDATA[ 
function check(form){ 
    if(form.UserID.value=="" || form.Pass.value==""){ 
     alert("BLAHBLAHBLAH") 
    } 
} 
// ]]></script> 
</p> 
相關問題