如何解释JavaScript提示中用户输入的打字错误？_Javascript_Html_User Interface

如何解释JavaScript提示中用户输入的打字错误？

javascript html user-interface

如何解释JavaScript提示中用户输入的打字错误？,javascript,html,user-interface,Javascript,Html,User Interface,首先，你好！我是这个网站的新手，所以我为我发布的任何错误道歉我在一个网络技术课上学习JavaScript。在上一节课中，我们学习了HTML5和CSS。我们目前的任务是制作一个网页，当用户在提示窗口中输入相应的单词时，该网页将显示3幅图像中的1幅，或者不显示任何图像我想知道是否有办法解释用户输入的打字错误？例如，我在代码“Spn”中输入了“Son”，但我想知道是否有一种方法可以很容易地做到这一点，这样，如果用户错误地输入了“Son”，他们仍然会看到图像。有没有一种方法可以做到这一点，而不必添

首先，你好！我是这个网站的新手，所以我为我发布的任何错误道歉

我在一个网络技术课上学习JavaScript。在上一节课中，我们学习了HTML5和CSS。我们目前的任务是制作一个网页，当用户在提示窗口中输入相应的单词时，该网页将显示3幅图像中的1幅，或者不显示任何图像

我想知道是否有办法解释用户输入的打字错误？例如，我在代码“Spn”中输入了“Son”，但我想知道是否有一种方法可以很容易地做到这一点，这样，如果用户错误地输入了“Son”，他们仍然会看到图像。有没有一种方法可以做到这一点，而不必添加单独的if语句

下面是我到目前为止的代码，其中包括我的小“测试”，看看我是否可以做到这一点。当我只有两个项目（例如：“Spn”，Spn）时，我认为它起作用了，但当我添加第三个项目时，它停止了作用，现在它不再起作用了。不过，我可能完全错误地认为曾经成功过

哦，另外，我们只允许使用JavaScript、HTML和CSS。因此，如果您有一个解决方案是jquery（我不知道那是什么），那么谢谢您，但恐怕我不能使用它

如果您需要任何其他信息，请告诉我，我将很乐意提供给您。非常感谢您的帮助，我非常感谢！ -卡莉

JavaScript代码（文件名为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";
                };
    }

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

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;
    }

HTML代码（文件名为userchoice.HTML）：

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";
                };
    }

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

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;
    }

除了在代码中加入智能，我将给出一个相当简单的方法，详细如下：

由于您决定“Son”应该调出理想的“Spn”图像，我们应该使用您自己创建的映射。我们可以有如下内容：

` 2、为了创建字典，你只需考虑你正在键入的字母周围的字符。

注意：此方法假设您只有这三个方面可供比较。如果您想要一个更通用的解决方案，该解决方案不仅适用于Spn、DW、SH、None，请让我知道。

+1这是一个很好的答案。如果您不完全理解该解决方案，或者在实现该解决方案时遇到问题，您应该在此处发表评论。例如，如果您确实理解该解决方案不知道javascript中的对象是什么，您可以询问var dict是什么或dict[temp]做什么。（如果您已经知道了，很抱歉，我只是不确定您有多新。）这是一个你可能会感到困惑的东西，它与？和有关：它被称为三元运算符。这里有一个解释。它基本上是一个if-else语句。谢谢你们两位的帮助！我是JavaScript新手，到目前为止，我们已经了解了函数、变量和条件。我真的不太了解其他内容，我正在努力理解，但这让我很困惑，哈哈。哦，天哪，连链接都让我困惑。我感谢你的帮助！希望如果我盯着你们给我的这些资源看足够长的时间，我能找到答案。^-^哦，对不起，这是双贴，但如果有帮助的话，这就是“教科书”“我们正在使用：@Carlyndra该教科书足以理解此处的代码。一旦你完成了你的课程，回到这里，也许你会有预感