比较字符串值并在 javascript 中显示正确的“答案”答案

【问题标题】：Comparing string values and showing correct 'answers' in javascript比较字符串值并在 javascript 中显示正确的“答案”
【发布时间】：2018-08-05 09:09:34
【问题描述】：

我对 Javascript 相当陌生，正在尝试学习编写一个程序，该程序以一种语言（例如西班牙语）显示文本并有一个输入框，用户可以在其中输入翻译后的（例如英语）单词。然后将用户输入与翻译的单词进行比较，以查看它们是否相同。我还希望允许一些容忍度，以防用户输入一个没有重音的单词，如果应该有一个（例如 esta 而不是 está），它不会被计算错误。如果它们不一样，我希望能够与用户输入的内容相比显示正确的单词。我一直在尝试解决这个问题，但经常卡住（例如，当我运行另一个函数来检查值时，它会打开一个新实例，而我希望它全部显示在同一页面上）。对此的任何帮助将不胜感激。到目前为止，这是我所拥有的：

<!DOCTYPE html>
<html>
    <head>
        <title>Flashcards</title>
    </head>
    <body>
    <script>
        var number = Math.floor((Math.random()*2));
        var spanish_word = ["hola","adios"]
        var Spanish = spanish_word[number];
        var english_word = ["hi","bye"];
        var English = english_word[number];
        document.write("Spanish: " + Spanish);
    </script>
    <p>English Translation: <input id="english_word" type="text" name="LastName" value="" ></p>
    <input type="button" id="myBtn" onclick="check()" value="Check">
    <input type="button" id="button" onclick="differentword()" value="Different Word">
    <script>
    function check()
    {
        var english_word= document.getElementById('english_word').value;
        if (english_word == English) {
            document.write("Correct");
        } 
        else {
            document.write("Wrong: ");
            document.write(Spanish+" in English is "+English);
        }

    }
    function differentword() {
        var number = Math.floor((Math.random()*2));
        var spanish_word = ["hola","adios"]
        var Spanish = spanish_word[number];
        var english_word = ["hi","bye"];
        var English = english_word[number];
        document.write("Spanish: " + Spanish);

    }
    </script>
    </body>
</html>

或者，如果你想看看它是如何运行的，你可以在这里查看https://code.sololearn.com/WXHZ5aAcE3dg/#html。

【问题讨论】：

您有什么具体需要帮助的吗？
你永远不会在differentword 中使用English。另外，如果您是 JS 新手，建议您搜索alternatives for document.write。
@forrestmid 只是比较两个字符串，以便显示用户输入的单词和正确的单词。我现在拥有的方式如果用户输入正确的单词，它会说“正确”，如果不是，它会告诉他们正确的单词是什么，但我希望能够比较用户输入和正确的单词，以便用户可以看看他们是否错了。此外，我不希望它那么敏感。最后，只需制作它，这样我就可以在不刷新的情况下重新运行代码也会有很大帮助

标签： javascript html arrays string

【解决方案1】：

您的问题摘要 我的理解是您试图测试用户对第二语言的知识，即：西班牙语、法语等。

解决方案 Switch 或 If 语句是一种测试和比较变量的方法您需要做的是首先将字符串变量转换为小写，以确保用户输入的内容始终相同。

您还需要修复一些代码。所以让我们先看看...

    var number = parseInt((Math.random()*1));
    var spanish_word = ["hola","adios"];

spanish_word 是一个从 0 而不是 1 开始的数组。
您随机生成的数字存储为“数字”，同样需要为 0 或 1，简单的整数就足够了。

除非您将其提交到服务器以由 PHP 或 ASP 等中的某些后端代码处理，否则您不需要此处的“名称”属性

name="姓氏"

然后您将覆盖数组

在开始时，您使用以下值设置数组 var english_word = ["hi","bye"];

但是当你点击按钮来检查你是否有正确的答案您正在删除上述内容并告诉它是用户输入的内容

var english_word= document.getElementById('english_word').value;

无需一直设置和取消设置数组

尝试为变量使用更好的命名约定用它们的数据类型缩写它们：

arrEnglishWord 来表示它的一个数组
strEnglishWord 来表示它是一个字符串
intEnglishISOCode 来表示一个数字整数
blEnlish 表示布尔值

大量代码重复：
使用事件监听器可以保存代码重复

document.addEventListener("DOMContentLoaded", differentword, false);

将在页面加载时使函数 differentword 运行，让您摆脱顶部的重复代码

解决方案 我们需要使比较公平（即不区分大小写）

var strAnswerGiven = english_word.toLowerCase();
var strCorrectAnswer = English.toLowerCase();
if (strAnswerGiven == strCorrectAnswer) {

var arrSpanishWords = ["Hola", "Adios", "Purta", "Luz"];
var arrEnglishWords = ["Hello", "Goodbye", "Door", "Light"];
var strWord = undefined;
var divAnswer = undefined;
function funCheck(elName){
   var stAnswer = document.querySelector("#" + elName).value;
   var stAnswerGiven = stAnswer.toLowerCase();
   var stAnswerExpected = strWord.toLowerCase();
   if (stAnswerGiven == stAnswerExpected){
      divAnswer.style.color = "#0F0";
      divAnswer.innerHTML = "Correct";
   }else{
      divAnswer.style.color = "#F00";
      divAnswer.innerHTML = "Wrong";
   }
}

function funNewQuestion(){
    var intRandomQNum = parseInt(Math.random() * arrSpanishWords.length);
    var elDisplayQuestion = document.getElementById("divWord");
    divAnswer = document.getElementById("divAnswerIs");
    divAnswer.innerHTML = "";
    elDisplayQuestion.innerHTML = arrSpanishWords[intRandomQNum];
    strWord = arrEnglishWords[intRandomQNum];
}

document.addEventListener("DOMContentLoaded", funNewQuestion(), false);

Word: <div id="divWord"></div><div id="divAnswerIs"></div>
Answer: <input type="text" id="frmTxtAnswer">
<button id="check" onclick="funCheck('frmTxtAnswer')">Check Answer</button>
<button id="check" onclick="funNewQuestion()">Next Question</button>

【讨论】：

我想我理解你所说的大部分内容，但是我仍然对我到底需要做什么感到有些困惑。有什么方法可以联系你（所以我们不必继续使用它），这样你就可以更好地帮助我？这只是一个让我更好地学习语言的小项目，但似乎我低估了这个项目的难度。
还要补充一点，您正在使用按钮的输入（类型按钮），如果您使用输入，则需要将它们包裹在表单周围，这将导致提交，因为这是 javascript，您要么想禁止提交，要么使用不需要表单的按钮元素。我刚刚注意到这个错误，而且在我的示例中，我输入的是 Purta 而不是 Puerta

【解决方案2】：

这里有 2 个问题。

您根本没有设置当前的<input id="english_word" type="text" name="LastName" value=""> 任何值（通过html/js）。您应该将其设置为当前单词（作为字符串）以便稍后对其进行操作。
if 语句if (english_word == English) 被破坏，因为它检查english word，它是一个字符串，是否等于一个数组。它不是，也永远不会。

但是，检查当前字符串 word 是否等于字符串，在我的选择中并不是一个好方法。我希望更好地使用 index 来显示和操纵该索引的当前单词。

我的建议是你通过使用一个新变量来解决上述问题：current_word_index，这样你就可以在程序中使用它来通过知道当前单词来检查答案正在显示。

下面的代码只是一个示例，说明当前如何通过索引从数组中检索：

var current_word_index = 0; // this 0 will change to rand()
var english_word = ["hi","bye"];
english_word[current_word_index];
// english_word will be string "hi".

这是我的完整答案： https://fiddle.jshell.net/j44fjh35/15/

【讨论】：