Creating captchas seems like a mistake in reasoning to me

Question

Creating captchas seems like a mistake in reasoning to me

I am encountering an issue with my code. I created a basic newbie-level captcha using Javascript. Below is the code snippet:

<!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 does the captcha function? It's designed to be simple - after completing the first captcha, the second image will appear, and upon completion of that captcha, a specific task will be displayed. However, there seems to be an error in the code. I'm unsure if it's a problem with my conditional statements or something else entirely. I've been stuck on this for about 7 hours now and would appreciate any assistance.

javascript

Answer 1

Answer №1

The code you provided has several issues that need to be addressed for it to work properly.

It is recommended to remove the unused attribute img from
```
<img id="firstImage" img src="pictureOne.jpg">
```
To ensure the correct functionality, remove = 'pictureOne.jpg' from
```
var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'
```
and retrieve the actual content of element #firstImage instead of setting it to 'pictureOne.jpg' every time
There is a line checkPic.toString() that can be removed as it is unnecessary (and also missing a ; at the end)
Use == instead of ===, as === will compare if both sides are the same object, not just equal. For example, if i=5 and x=5, i==x is true but i===x is false and i===i is true
Consider using .endsWith(" to compare image locations, as they begin with http://xyz.abc/ and only the end needs to be checked

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

Let's discuss the CAPTCHA further or has your query been resolved?

Answer 2

The code you provided has several issues that need to be addressed for it to work properly.

It is recommended to remove the unused attribute img from
```
<img id="firstImage" img src="pictureOne.jpg">
```
To ensure the correct functionality, remove = 'pictureOne.jpg' from
```
var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'
```
and retrieve the actual content of element #firstImage instead of setting it to 'pictureOne.jpg' every time
There is a line checkPic.toString() that can be removed as it is unnecessary (and also missing a ; at the end)
Use == instead of ===, as === will compare if both sides are the same object, not just equal. For example, if i=5 and x=5, i==x is true but i===x is false and i===i is true
Consider using .endsWith(" to compare image locations, as they begin with http://xyz.abc/ and only the end needs to be checked

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

Let's discuss the CAPTCHA further or has your query been resolved?

Answer 3

Answer №2

Make sure to only use the image filename in your code, rather than the full URL path. To do this, you'll need to extract the substring from the end of the URL.

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

    <body>
    <h1>Testing Captcha</h1>
    <hr>
    <img id="firstImage" src="image.jpg">
    <input type="text" id="firstInput"/>
    <button type="button" onclick="checker()">Confirm</button>
    <hr>
    <p id="cone">Please enter the text shown in the image above. This is a captcha feature to prevent spam.</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 === "image.jpg" && takePic === 'c') {
                document.getElementById('firstImage').src = 'new-image.jpg';
                alert("Please confirm the second captcha.");
            } else if (checkPic === 'new-image.jpg' && takePic === 'u') {
                alert("Ready for download.");
            }
        }

    </script>
    </html>

Answer 4

Make sure to only use the image filename in your code, rather than the full URL path. To do this, you'll need to extract the substring from the end of the URL.

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

    <body>
    <h1>Testing Captcha</h1>
    <hr>
    <img id="firstImage" src="image.jpg">
    <input type="text" id="firstInput"/>
    <button type="button" onclick="checker()">Confirm</button>
    <hr>
    <p id="cone">Please enter the text shown in the image above. This is a captcha feature to prevent spam.</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 === "image.jpg" && takePic === 'c') {
                document.getElementById('firstImage').src = 'new-image.jpg';
                alert("Please confirm the second captcha.");
            } else if (checkPic === 'new-image.jpg' && takePic === 'u') {
                alert("Ready for download.");
            }
        }

    </script>
    </html>

Creating captchas seems like a mistake in reasoning to me

Answer №1

Answer №2

Similar questions

Eliminate the JSON object within jqGrid's posted data

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

Retrieve the property value from a nested object using a key that contains spaces

AngularJS directive ngShow not working properly

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Stable Banner with Automatic Scroll to Sections

What is the most efficient method for appending /.json to the conclusion of express routes?

Having trouble updating Vuejs array with new values

Stream of information that triggers a specific action based on a specified condition

The data in AngularJS is not being successfully incorporated into the service

Ways to retrieve Data obtained in response using superagent

What is the best method to compare dates in JavaScript/JQuery to determine if one comes before the other?

best practices for transferring object data to a table with ng-repeat

What is the reason that JavaScript does not run the code sequentially?

Show the total of a JavaScript calculation in a designated input box

In order to access the localStorage from a different component, a page refresh is required as it is

Is there a way to retrieve the HTML code of a DOM element created through JavaScript?

"I am sending a JSON object to a PHP script and extracting the

Verifying file types with HTML5 drag and drop feature

Challenge encountered when attempting to remove elements from an array within a for loop