CODEWITHSUNDEEP
javascript
cleo master
cleo master

Reputation: 13

Captcha making, I think it is a logical error

I am having a problem in my code, I made a very simple newbie type captcha using Javascript the following is the my code.

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

How the captcha will work? Well i tried to make it simple, just like on completing the first captcha the second image will appear and then after finishing that captcha a certain task will be shown. The issue is that the code is not working. I don't know if my condition statements have problem or what so ever please help me. I am stuck in this like for 7 hours.

Upvotes: 0

Views: 48

Answers (2)

Marcus
Marcus

Reputation: 1930

you have several problems in you code. I first try to fix this problems.

  1. remove unused attribute img from <img id="firstImage" img src="pictureOne.jpg">

  2. remove = 'pictureOne.jpg' from var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg' to get the real content of element #firstImage instead of setting it every time to pictureOne.jpg

  3. remove line checkPic.toString(). Its not needed (and missing a ; at the end)

  4. use == instead of === because === will test if both sides are the same thing and not only equal. Example: define i=5 and x=5 --> i==x is true but i===x is false and i===i is true

  5. use .endsWith(" to compare your image locations because they will start with http://xyz.abc/ and you only have to check the end

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

Now we can talk about the CAPTCHA or is your question already solved?

Upvotes: 1

Suleiman
Suleiman

Reputation: 11

Try this, you are using the full url of the image, which is not always the same as "pictureOne.jpg", you need get the substring of the url from the end. 

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

Upvotes: 0

Related Questions