用于下一个输出的明文

JS Clear text for next output

本文关键字：明文 输出 下一个 用于      更新时间：2023-09-26

下面的代码打乱了一个短语，然后要求用户重新排列成正确的逻辑顺序，当输入正确的短语时，代码输出"正确答案"，然后输出第二个问题，但是输出时，"正确答案"仍然显示。我怎样才能为下一题做准备呢?

Thx奶油水果蛋白饼

var currentQuestion = 0;
var words = 
        [
    ['how', 'are', 'you', 'today?'],
    ['what', 'would', 'you', 'like', 'for', 'breakfast?'],
    ['what', 'would', 'you', 'like', 'for', 'tea?']
];
var correctInput = [
    ['how are you today?'],
    ['what would you like for breakfast?'],
    ['what would you like for tea?']
];
function showQuestion(i) {
    if(i < words.length) {
        document.myForm.textinput.value = '';
        newWords = words[i].slice(0);
        shuffle(newWords);
        var el = document.getElementById('phrase');
        el.textContent = newWords.join(' ');
    }
}
function setup() {
    showQuestion(currentQuestion);
    var form = document.getElementById('myform');
    form.addEventListener('submit', checkAnswer, false);
}
function checkAnswer(e){
    e.preventDefault();
    var elMsg = document.getElementById('feedback');
    if (document.myForm.textinput.value == correctInput[currentQuestion]) {
            elMsg.textContent= "right answer";
            currentQuestion++;
            showQuestion(currentQuestion);
    } else {
        elMsg.textContent= "wrong answer";
    } 
}
function shuffle(newWords) {
    var counter = newWords.length, temp, index;
    while (counter > 0) {
        index = Math.floor(Math.random() * counter);
        counter--;
        temp = newWords[counter];
        newWords[counter] = newWords[index];
        newWords[index] = temp;}
    return newWords;}
setup();
<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title>  
</head> 
<body>  
    <form  name="myForm" id ="myform">
        <div id ="phrase"></div>    
        <input type = "text" id = "textinput"> 
        <button id="myBtn">Click here</button>
        <div id ="feedback"></div>
    </form>
    <script src = "phraseScrambler.js"></script>  
</body>
</html>

添加:

document.getElementById('feedback').text = '';

在您想要清除"正确答案"的地方。

你可以将它绑定到文本框上的onKeyUp事件监听器。这样，当用户开始输入下一个答案时，它将清除"正确答案"。

您可以像这样为输入字段附加一个事件侦听器

<input onfocus='document.getElementById("feedback").innerHTML = "";'>

这将在每次输入集中时清除反馈

这将在3秒后隐藏两个消息。

if (document.myForm.textinput.value == correctInput[currentQuestion]) {
        elMsg.textContent= "right answer";
        currentQuestion++;
        showQuestion(currentQuestion);
} else {
    elMsg.textContent= "wrong answer";
} 
setTimeout((function (elMsg) { return function () {
    elMsg.textContent = '';
}})(elMsg), 3000)
相关文章：