How to account for user-entered typos in a JavaScript prompt?

Question

First off, hello! I'm new to this website so I apologize for any errors that I make posting-wise.

I am in a web technology class where we are learning JavaScript. In a previous class we learned HTML5 and CSS. Our current assignment is to make a webpage that will either display 1 of 3 images or no images when the user enters the corresponding word in the prompt window.

I was wondering if there was a way to account for user-entered typos? For example, I have in the code "Spn" but was wondering if there was a way to easily make it so that if a user were to enter "Son" by mistake, they would still be shown the image. Is there a way to do this without having to add a separate if statement?

Below is the code I have so far, which includes my little "test" to see if I could do this. I thought it had worked when I only had two items (ex: "Spn, "spn"), but when I added a third it stopped working, and now it isn't working again. I may have very well been mistaken that there was ever a success, though.

Oh, also, we are only allowed to use JavaScript, HTML, and CSS. So if you have a solution that is jquery (I have no idea what that is), then thank-you, but I'm afraid I can't use it.

Please let me know if there is any other information that you need and I will gladly supply it to you. Thank-you very much for your help, I very much appreciate it! -Carly

JavaScript Code (file name is switch.js):

var temp = "None";


function choose()
    {
        temp = prompt("Spn, DW, SH, or None?");

            if (temp == "Spn","spn")
                {
                    document.getElementById("picture").src="first.jpg";
                    document.getElementById("sub").innerHTML="Supernatural";
                    document.getElementById("picture").style.visibility="visible";
                };
            if (temp == "DW","dw","Dw")
                {
                    document.getElementById("picture").src="second.jpg";
                    document.getElementById("sub").innerHTML="Doctor Who";
                    document.getElementById("picture").style.visibility="visible";
                };
            if (temp == "SH","sh","Sh")
                {
                    document.getElementById("picture").src="third.jpg";
                    document.getElementById("sub").innerHTML="Sherlock";
                    document.getElementById("picture").style.visibility="visible";
                };
            if (temp == "None","none")
                {
                    document.getElementById("picture").src="blank.jpg";
                    document.getElementById("sub").innerHTML="Click button to reveal image";
                    document.getElementById("picture").style.visibility="hidden";
                };
    }

HTML Code (file name is userchoice.html):

<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="switch.js"></script>
    <title>What is this not working I'm going to cry</title>
</head>

<body>
    <h1>SuperWhoLock</h1>
    <h2 id="sub">Click button to reveal image</h2>

    <div id="picblock">
        <img src="blank.jpg" id="picture">
    </div>

    <div id="buttons">
        <button onclick="choose()">Choose Picture</button>
    </div>
</body>

</html>

CSS code (the file name is style.css):

body  
    { background-image:url('background.jpg');
    }




h1
    { width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: black;
    color: white;
    }

h2
    { width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: white;
    color: black;
    }

#picblock
    { width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

#picture
    {visibility:hidden;
    }


#buttons
    { text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

Answer 1

Barring the foray into putting intelligence in the code, I will give a rather simplistic approach, detailed below:

Since you are the one who is deciding that "Son" should pull up the image ideally meant for "Spn", we should use a mapping that is created by you yourself. We can have something like this:

`

var spn = "Spn", dw ="DW",sh="SH";

//creating a custom mapping
var dict = {
"Son":spn,
"Sln":spn,
"Spn":spn,
"DW":dw,
"DE":dw,
"SH":sh

}

//Your if would look like:
temp = (dict && dict[temp])?dict[temp]:null;

if (temp && temp.toLower() == "spn")

` 2. For creating that dictionary, you will just have to consider the characters around the letter that you are typing.

Note : This approach assumes you have only these three things to compare. If you want a more generic solution that should work beyond Spn,DW,SH, None, please let me know.

How to account for user-entered typos in a JavaScript prompt?

Question

1 answers

solution1
1 2014-02-09 20:07:32

How to account for user-entered typos in a JavaScript prompt?

Question

1 answers

solution1 1 2014-02-09 20:07:32

solution1
1 2014-02-09 20:07:32