检查一个数组的索引是否等于另一个数组的索引

Question

基本上我有两个数组，一个包含法语的 1-30，另一个包含英语的 1-30。我一直在尝试做的是检查用户是否为法语号码选择了正确的翻译。这是以选择菜单的形式完成的。 5个随机数用于从英语单词数组中挑选5个英语单词，然后将它们放入选择菜单中。在我点击提交猜测的那一刻，它会说每一个英文翻译都和我的法语单词一样！

代码如下：

number = random = Math.floor((Math.random() * 30));
round = Math.round(number);
number = round;

function wordGen()
{
    var RanNumbers = new Array(6); //Holds the generated Numbers.

    for (var j = 0; j < RanNumbers.length; j++)
    {
        var temp = 0;
        do
        {
            temp = Math.floor(Math.random() * 30);
        }while (RanNumbers.indexOf(temp) > -1)

        RanNumbers[j] = temp;
    }
//Instead give user option of 5 answers to choose from
//Only one answer can be true.


foreignWords = new Array('un', 'deux', 'trois','quatre', 'cinq', 'six', 'sept','huit', 'neuf','dix','onze', 'douze', 'treize', 'quatorze','quinze','seize', 'dix-sept', 'dix-huit', 'dix-neuf', 'vingt', 'vingt et un','vingt-deux', 'vingt-trois', 'vingt-quatre', 'vingt-cinq', 'vingt-six', 'vingt-sept', 'vingt-huit', 'vingt-neuf', 'trente');

var translate = new Array('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty-one', 'twenty-two', 'twenty-three', 'twenty-four', 'twenty-five', 'twenty-six', 'twenty-seven', 'twenty-eight', 'twenty-nine', 'thirty');


output = '';
randomWord = foreignWords[number];
correctAns = translate[number];

document.getElementById('generatedWord').innerHTML = randomWord;
var guessed = document.getElementById('guessed').value;
var guess = "<select name='guesses' id='guesses'>";
for(var i = 0; i < 6; i++) 
{

    guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";

}
    guess += '<option value="6">'+correctAns+'</option';
    guess += "</select>";

    document.getElementById('output').innerHTML = guess;
    numGuessed = document.getElementById('guesses').value;

    //What I have tried ATM, THis will say every answer is correct! 
    document.getElementById('submitAns').onclick = function(){
            if(foreignWords.indexOf(number) === correctAns.indexOf(number)){
                alert("Correct");
            }
            else{
                alert('Incorrect'); 
            }



    }
}

我已经为下面的代码添加了 html：

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <h2 style="color:rgba(0,153,204,1);">Guess what the generated french word translates to in English!</h2><br />

        <p align="center" id="generatedWord"></p>

        <input type="button" value="Generate Word" onClick="wordGen();" />
        <br />
        <input type="text" id="guessed" />
        <div align="center" id="output"></div>
        <br />
        <input type="button" id="submitAns" value="Submit Guess" />

    </div>

所以目前我的 if 语句说每个英文单词都是正确的答案。在我的 HTML 页面中，我只有 2 个按钮，一个用于运行功能（显示法语单词并选择菜单），另一个按钮用于提交猜测。 ***如果我需要使用 jquery，我会，但我更喜欢使用纯 javascript！

Answer 1

匹配数字（用随机数生成）以翻译数组索引，因为它正在生成外部数组中的输出，如果匹配，则答案是正确的。

function arrayValueIndex(arr, val){
    for(var i=0; i< arr.length; i++) {
        if(arr[i] === val) {
           return i;
         }
     }
     return false;
}

在您的点击事件中

document.getElementById('submitAns').onclick = function() {
   var 
       genWord = document.getElementById('generatedWord').textContent,
       select = document.getElementById('guesses'),
       selectedText = select.options[select.selectedIndex].text;
       number === arrayValueIndex(translate, selectedText) ? alert("Correct") : alert('Incorrect');
};

http://jsfiddle.net/zwemm70g/

Answer 2

我不肯定，因为我不确定你是如何显示你的外来词和非外来词的，但是，我认为：

numGuessed === number

应该可以，因为据我所知，numGuessed 在猜测的单词的索引中，number 是要翻译的单词的索引。

如果这不起作用，请在您的问题中说明 HTML 是如何工作的，并让我知道您已编辑，我将编辑我的答案。

Answer 3

我马上就发现您的代码逻辑存在一些问题。我先提一下。

1. 您正在尝试使用id“猜测”获取元素的值。在您的html 中没有任何具有此 ID 的元素。我假设您正在尝试使用 id "guesses" 获取 select 元素的值，但这又不起作用，因为您在尝试获取它的值之后才创建该元素。

    var guessed = document.getElementById('guessed').value;
    var guess = "<select name='guesses' id='guesses'>"; 
    ... 
   

2. 变量randomWord 和correctAns 是简单的字符串，您可以从您创建的两个数组的索引number 中得到它们。所以下面的说法没有意义：

   foreignWords.indexOf(number) === correctAns.indexOf(number) 
   

这没有意义，因为correctAns 是一个字符串，因此它会尝试将number 首次出现的index 作为子字符串提供给您。 foreignWords 是一个数组，因此这里显然不匹配。

事实上，你只需要正确地理解这个逻辑，你就可以断言用户选择了正确的答案。您只需要获取所选option 的text 属性并尝试查看它是否等于correctAns 变量。你可以这样做：

 document.getElementById('submitAns').onclick = function () {
   var x = document.getElementById("guesses").value; //get the index of selected option
   var guessed = document.getElementsByTagName("option")[x].text; //get the text of that option

    if (ans === correctAns) {
        alert("Correct");
    } else {
        alert('Incorrect');
    }

 }

我创建了一个简单的jsfiddle 将此代码 sn-p 合并到您的逻辑中，并且似乎工作正常。随意玩弄它，我希望它能让你朝着正确的方向开始。

旁注-我看到您添加了正确的答案，即 correctAns 始终添加到 select 列表的底部，如下所示：guess += '<option value="6">'+correctAns+'</option';。这不是随机的，对于使用您的程序的人来说，他/她可能会在几次尝试中看到该模式并且不会掌握英文数字：P。尽量考虑到这一点。