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

Sending a message to a specific client using socket.io

Ways to examine the origin of an image based on the attributes of a React component that I have passed as a prop?

Ensure that every route is prefixed with /api

Can Self-Invoking Functions, Resharper 6.1, and JS Lint all Play Nice Together?

What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

Which option would be more beneficial for crafting a responsive UI: integrating a UI framework with three.js or solely relying on vanilla

Place a vertical slider adjacent to an HTML element on either the left or right side

Bringing in an external .js file into nuxt.config.js

how can JavaScript be used to retrieve an object based on a condition from an array of objects and an ArrayList

What is the number of steps jQuery animates in?

The contenteditable div's selectAll feature doesn't function properly when it gains focus

What is the best way to keep vue-meta up to date when the route or URL

Use JQuery to gradually decrease the opacity of divs individually

The Ajax post function successfully executes on the first attempt, but on subsequent tries it does

When attempting to dispatch in getServerSideProps, the State refuses to change. Could it be due to the Redux-Next-Wrapper?

How can AngularJS apps handle authentication?

Display a text box upon clicking an item

Using TypeScript gives you the ability to specify the type of an object while destructuring it,

Summon wicket from the non-wicket-component entity

When developing a node.js project using VMWare's shared folder, how can you manage the node_modules folder?