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

时间:2018-02-25 23:24:28

标签: javascript html arrays string

我对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

2 个答案:

答案 0 :(得分:0)

这里有2个问题。

  1. 您还没有设置任何值<input id="english_word" type="text" name="LastName" value="">(通过两个html / js)。您应该将其设置为当前单词(作为字符串)以便以后操作它。
  2. if语句if (english_word == English) 已损坏,因为它会检查english word字符串)是否等于数组< / strong>即可。并且它不会,也永远不会。
  3. 但是,检查当前字符串单词是否等于字符串,在我的选项中不是一个好方法。我想更好地使用索引来显示和操纵该索引的当前单词。

    我的建议你是通过使用一个新变量来解决上述问题: 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/

答案 1 :(得分:0)

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

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

您还需要修复一些代码。 那么先来看看......

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

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

除非您将此提交到服务器以由PHP或ASP等中的某些后端代码处理,否则您不需要&#34; name&#34;属于这里

名=&#34;名字&#34;

然后你超越阵列

一开始,您将使用以下值设置数组 var english_word = [&#34; hi&#34;,&#34; bye&#34;];

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

var english_word = document.getElementById(&#39; english_word&#39;)。value;

无需继续设置和取消设置数组

尝试为变量使用更好的命名对象 将它们缩写为具有哪些数据类型:

arrEnglishWord象征着它的阵列
strEnglishWord象征它是一个字符串
intEnglishISOCode用于表示数字整数
blEnlish用于表示布尔值
很多代码重复:
使用事件监听器可以保存代码重复

document.addEventListener(&#34; DOMContentLoaded&#34;,differentword,false);

当页面加载时,将使函数不同的字运行,允许你摆脱顶部的重复代码
解决方案 我们需要使比较公平(即不是案例发送)

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

&#13;
&#13;
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);
&#13;
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>
&#13;
&#13;
&#13;