Question

我的代码出现问题，我使用Javascript制作了一个非常简单的新手类型验证码，以下是我的代码。

＆＃13;

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

＆＃13;

验证码的工作原理如何？好吧，我试着让它变得简单，就像完成第一个验证码一样，第二个图像将出现，然后在完成验证码之后将显示某个任务。问题是代码不起作用。我不知道我的病情陈述是否有问题或者有什么好请帮助我。我被困在这里7个小时。

Answer 1

您的代码中有几个问题。我首先尝试解决这个问题。

从img

<img id="firstImage" img src="pictureOne.jpg">

从= 'pictureOne.jpg'移除var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'以获取元素#firstImage的真实内容，而不是每次都设置pictureOne.jpg
删除行checkPic.toString()。它不需要（最后缺少;）
使用==代替===，因为===会测试双方是否相同而且不仅相等。示例：define i = 5和x = 5 - ＆gt; i == x为真，但我= = x为假，我= = i我是真的
使用.endsWith("来比较您的图片位置，因为它们将以http://xyz.abc/开头，您只需检查结束

＆＃13;

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

＆＃13;

现在我们可以谈谈CAPTCHA还是你的问题已经解决了？

Answer 2

试试这个，你正在使用图像的完整网址，这与“pictureOne.jpg”并不总是一样，你需要从最后获取网址的子字符串。

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

Captcha制作，我认为这是一个逻辑错误

2 个答案: