Question

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

我正在学习JavaScript的网络技术课程。在之前的课程中，我们学习了HTML5和CSS。我们当前的任务是创建一个网页，当用户在提示窗口中输入相应的单词时，该网页将显示3个图像中的1个或没有图像。

我想知道是否有办法解释用户输入的拼写错误？例如，我在代码“Spn”中，但是想知道是否有一种方法可以轻松地制作它，以便如果用户错误地输入“Son”，它们仍然会显示图像。有没有办法在不添加单独的if语句的情况下执行此操作？

下面是我到目前为止的代码，其中包括我的小“测试”，看看我是否可以这样做。当我只有两件物品（例如：“Spn，”spn“）时，我认为它有效，但是当我添加第三件物品时，它停止工作，现在又不再工作了。我可能错误地认为那里但是，这是一次成功。

哦，我们也只允许使用JavaScript，HTML和CSS。所以，如果你有一个jquery的解决方案（我不知道那是什么），那么谢谢你，但我担心我不能使用它。

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

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

HTML代码（文件名为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代码（文件名为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

除非在代码中加入智能，否则我将采用一种相当简单的方法，详情如下：

既然你是那个决定＆＃34; Son＆＃34;应该提取理想用于＆＃34; Spn＆＃34;的图像，我们应该使用由您自己创建的映射。我们可以这样：

`

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.要创建该字典，您只需要考虑您正在输入的字母周围的字符。

注意：此方法假设您只需要比较这三件事。如果你想要一个超出Spn，DW，SH，None的更通用的解决方案，请告诉我。

如何在JavaScript提示中说明用户输入的拼写错误？

1 个答案: