输入字段中的答案正确时未显示警报消息？答案

【问题标题】：Alert message not showing when answer is correct from input field?输入字段中的答案正确时未显示警报消息？
【发布时间】：2020-03-12 12:36:42
【问题描述】：

// 用法语和英语的每个指示创建一个数组 - 现在、不完美和未来

const frenchPresImpFut = ['Je suis', 'Tu es', 'Il/Elle est', 'Nous sommes', 'Vous êtes', 'Ils/Elles sont', "J'étais", 'Tu étais', 'Il/Elle était', 'Nous étions', 'Vous étiez', 'Ils/Elles étaient', 'Je serai', 'Tu seras', 'Il/Elle sera', 'Nous serons', 'Vous serez', 'Ils/Elles seront'];

const englishPresImpFut = ['I am', 'You are', 'He/She is', 'We are', 'You are', 'They are', 'I was', 'You were', 'He/She was', 'We were', 'You are', 'They were', 'I will', 'You will', 'He/She will', 'We will', 'You will', 'They will'];

// 创建一个函数，从法语数组中生成一个随机单词，然后验证用户回答是否正确

function randomWord() {
    randomNumber = Math.floor(Math.random() * frenchPresImpFut.length);
    let frenchWord = frenchPresImpFut[randomNumber];
    let englishWord = englishPresImpFut[randomNumber];
    let $guess = $('#userGuess').val();

    $('.randomFrenchWord').text(frenchWord);

    $('#nextWord').click(function () {
        if ($guess === englishWord) {
            console.log('Correct');
        }
    })
}

// 调用函数将随机单词插入页面

randomWord();

【问题讨论】：

您正在将Correct 记录到控制台。你检查控制台了吗？如果您需要提醒，请尝试改用alert("Correct")。

标签： javascript jquery arrays input

【解决方案1】：

我对代码进行了一些重构，因为即使当前代码有效，您也会遇到问题。 randomWord() 函数应该与检查用户输入的值的函数不同，您将在两种情况下调用此函数，即 1. 当页面加载时和 2. 当您单击 Next 按钮时。然后checkAnswer() 验证用户的输入。

注意对 HTML 所做的更改。

我相信你明白了。

$(document).ready(function() {
  randomWord();

  $('#nextWord').on('click', () => {
    randomWord();
  });

  $('#checkAnswer').on('click', () => {
    checkAnswer();
  });
});

let word = "";

const randomWord = () => {
  const frenchPresImpFut = ['Je suis', 'Tu es', 'Il/Elle est', 'Nous sommes', 'Vous êtes', 'Ils/Elles sont', "J'étais", 'Tu étais', 'Il/Elle était', 'Nous étions', 'Vous étiez', 'Ils/Elles étaient', 'Je serai', 'Tu seras', 'Il/Elle sera', 'Nous serons', 'Vous serez', 'Ils/Elles seront'];
  const englishPresImpFut = ['I am', 'You are', 'He/She is', 'We are', 'You are', 'They are', 'I was', 'You were', 'He/She was', 'We were', 'You are', 'They were', 'I will', 'You will', 'He/She will', 'We will', 'You will', 'They will'];

  randomNumber = Math.floor(Math.random() * frenchPresImpFut.length);
  let frenchWord = frenchPresImpFut[randomNumber];
  let englishWord = englishPresImpFut[randomNumber];
  $('.randomFrenchWord').text(frenchWord);
  word = englishWord;
}

const checkAnswer = () => {
  let guess = $('#userGuess').val();
  guess === word ? alert('Correct') : alert('incorrect');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="randomFrenchWord"></p>
<input id="userGuess">
<button id="checkAnswer">Answer</button>
<button id="nextWord">Next Word</button>
<p class="englishTranslation"></p>

【讨论】：

好的，谢谢，没看到。但是即使警报发生了变化，当提供正确的答案时，它仍然没有显示警报或以前甚至记录到控制台..
所以这也意味着console.log也没有运行？你怎么称呼randomWord()？你能粘贴你的 HTML 表单吗？
您需要在用户在输入中完成输入值时调用该函数。使用 onsubmit="randomWord()" 或 onblur。
另外，请务必在文件中添加 jquery。

【解决方案2】：

你可以试试这个

$(document).ready(function() {
        $('#nextWord').click(function () {
            randomWord();
        });
    });

    function randomWord() {
        const frenchPresImpFut = ['Je suis', 'Tu es', 'Il/Elle est', 'Nous sommes', 'Vous êtes', 'Ils/Elles sont', "J'étais", 'Tu étais', 'Il/Elle était', 'Nous étions', 'Vous étiez', 'Ils/Elles étaient', 'Je serai', 'Tu seras', 'Il/Elle sera', 'Nous serons', 'Vous serez', 'Ils/Elles seront'];
        const englishPresImpFut = ['I am', 'You are', 'He/She is', 'We are', 'You are', 'They are', 'I was', 'You were', 'He/She was', 'We were', 'You are', 'They were', 'I will', 'You will', 'He/She will', 'We will', 'You will', 'They will'];
        randomNumber = Math.floor(Math.random() * frenchPresImpFut.length);
        let frenchWord = frenchPresImpFut[randomNumber];
        let englishWord = englishPresImpFut[randomNumber];
        let $guess = $('#userGuess').val();

        $('.randomFrenchWord').text(frenchWord);

        if ($guess === englishWord) {
            console.log('Correct');
        }
    }

【讨论】：