0

基本上我有两个数组，一个包含 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！

4

3 回答 3

0

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

numGuessed === number

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

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

于 2014-11-07T11:24:57.110 回答
0

我立即看到您的代码逻辑存在一些问题。我将首先提到它们。

  1. id您正试图通过“猜测”来获取元素的值。在您的html. 我假设您正在尝试select使用“猜测”来获取元素的值，id但这再次不起作用，因为您在尝试获取它的值之后创建了元素。

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

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

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

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

事实上，你只需要正确地理解这个逻辑，你就可以断言用户选择了正确的答案。您只需要获取textselected 的属性option并尝试查看它是否等于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将此代码片段合并到您的逻辑中，并且似乎工作正常。随意玩弄它，我希望它能让你朝着正确的方向开始。

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

于 2014-11-07T11:43:05.173 回答
0

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

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/

于 2014-11-07T12:05:18.910 回答