2017-08-13 10 views
0

私はJavascriptを学習するためのエディタとしてatomを使い始めました。私はチュートリアルをオンラインで続けてきました。私のコードはまったく同じように見えますが、なんらかの理由でJavascriptの動作が不足しています。ここでは、単にatom、notepadd ++、またはnotepadを使い果たしていないコードの簡単な例を示します。アトムでは、notepadd iでatomic-live-serverを使用します。これはローカルホスト上でbasiclalyを開きます。何か考えてる?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")を実行してチェックしました。その場合、私はUserIDとPassにIDを割り当てていて、どちらも動作しませんでした。 – Artisan

+0

@Carcigenicateどうすればいいですか? – Artisan

答えて

0

別の方法:

  • は、IDの同様の入力を指定します。
  • ボタンを機能に渡します。
  • ボタンの親を取得します(<form>)。
  • valueを使用して#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

問題は、文字の大文字と小文字の区別を考慮していないことです。 userIdおよびUserIdは異なるとみなされます。したがって、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> 
関連する問題