キャプチャの作成、私は論理的なエラーだと思う。

私は自分のコードに問題があります。私は非常にシンプルな初心者のタイプのキャプチャをJavascriptで作っています。キャプチャがうまくいく方法キャプチャの作成、私は論理的なエラーだと思う。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Testing captcha</h1> 
 
    <hr> 
 
    <img id="firstImage" img src="pictureOne.jpg"> 
 
    <input type="text" id="firstInput"></input> 
 
    <button type="button" onclick="checker()">Confirm</button> 
 
    <hr> 
 
    <p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p> 
 
</body> 
 
<script> 
 
    function checker() { 
 
     var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg' 
 
     var takePic = document.getElementById('firstInput').value; 
 
     checkPic.toString() 
 
     if (checkPic === "pictureOne" && takePic === 'c') { 
 
      document.getElementById('firstImage').src = 'pictureTwo.jpg'; 
 
      alert("Please confirm the second captcha"); 
 
     } else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') { 
 
      alert("Ready to download.") 
 
     } 
 
    } 
 
</script> 
 
</html>

？まあ、私はそれをシンプルにしようとしました、ちょうど最初のキャプチャのように、2番目の画像が表示されますし、そのキャプチャを完了した後、特定のタスクが表示されます。問題は、コードが機能していないことです。私の条件文に問題があるのか、それとも今まで助けてくれているのか分かりません。私はこのように7時間くらい止まっています。

出典

2016-09-23 cleo master

キャプチャの背後にある全体のアイデアは、サーバー側の検証を行うことです。あなたのケースでは、検証コードはクライアント上にあるので、それを回避するのは簡単です。 readymade CAPTCHAソリューションを使用してください。 – GolfWolf

いいえ、これ以上完了するには、これを完了する必要があります。私はちょうど私の心の中でキャプチャの基本的な考えを入れたいと思う。私はそれをテストしているし、一般的に環境のJavaScriptプログラミングを見てしようとしているので、私はそれをフルクライアント側にした。このコードで私を助けてください。 –

コードにいくつかの問題があります。私はまず、この問題を解決しようとします。

代わりpictureOne.jpg
削除ラインcheckPic.toString()にそれを毎回設定の要素#firstImageの実際のコンテンツを取得するためにvar checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'から= 'pictureOne.jpg'を削除<img id="firstImage" img src="pictureOne.jpg">
から未使用の属性imgを削除します。その必要に応じて（と最後に;が欠落し）ない
使用==の代わり===両側が同じものであり、だけではなく等しい場合===がテストされますので。例：i = 5とx = 5を定義する - i == xは真であるが、i === xは偽でi === iは真である。

.endsWith("を使用すると、 http://xyz.abc/で始まり、あなただけの

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Testing captcha</h1> 
 
    <hr> 
 
    <img id="firstImage" src="pictureOne.jpg"> 
 
    <input type="text" id="firstInput"></input> 
 
    <button type="button" onclick="checker()">Confirm</button> 
 
    <hr> 
 
    <p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p> 
 
</body> 
 
<script> 
 
    function checker() { 
 
     var checkPic = document.getElementById('firstImage').src; 
 
     var takePic = document.getElementById('firstInput').value; 
 
     if (checkPic.endsWith("pictureOne.jpg") && takePic == 'c') { 
 
      document.getElementById('firstImage').src = 'pictureTwo.jpg'; 
 
      alert("Please confirm the second captcha"); 
 
     } else if (checkPic.endsWith('pictureTwo.jpg') && takePic == 'u') { 
 
      alert("Ready to download.") 
 
     } 
 
    } 
 
</script> 
 
</html>

は、今、私たちはCAPTCHAについて話すことができるか、あなたの質問はすでに解決されて終わり

をチェックする必要がありますか？

出典

2016-09-23 07:43:10 Marcus

「pictureOne.jpg」と同じではない画像の完全なURLを使用してください。最後からURLの部分文字列を取得する必要があります。

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
     </style> 
    </head> 

    <body> 
    <h1>Testing captcha</h1> 
    <hr> 
    <img id="firstImage" src="pictureOne.jpg"> 
    <input type="text" id="firstInput"/> 
    <button type="button" onclick="checker()">Confirm</button> 
    <hr> 
    <p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p> 
    </body> 
    <script> 

     function checker() { 
      alert(123); 
      var checkPic = document.getElementById('firstImage').src; 
      var takePic = document.getElementById('firstInput').value; 

      checkPic = checkPic.substring(checkPic.lastIndexOf('/')+1); 

      if (checkPic === "pictureOne.jpg" && takePic === 'c') { 
       document.getElementById('firstImage').src = 'pictureTwo.jpg'; 
       alert("Please confirm the second captcha"); 
      } else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') { 
       alert("Ready to download.") 
      } 
     } 

    </script> 
    </html>

出典

2016-09-23 07:47:27

キャプチャの作成、私は論理的なエラーだと思う。

答えて

関連する問題