2015-05-15 20 views
1

下面的代碼對一個短語進行粗加,然後要求用戶重新排列成正確的邏輯順序,當輸入正確的短語時,代碼輸出'正確答案',然後輸出第二個問題,但是與輸出,'正確答案'仍然顯示。如何爲下一個問題清除它?JS下一個輸出的明文

帕烏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>

+0

適用於Chrome瀏覽器。什麼不適合你? – mplungjan

回答

0

地址:

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

在您想要清除 '正確答案' 的地步。

您可以將其綁定到文本框上的onKeyUp事件偵聽器。這樣,當用戶開始輸入下一個答案時,它將清除「正確答案」。

0

你可以附加一個事件監聽器輸入字段這樣

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

這每一個輸入集中的時間將清除反饋。

0

這將在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)