javascript - JS Clear text for next output -
the code below jumbles phrase , asks user rearrange right logical order, when correct phrase entered code outputs 'right answer' , outputs second question, output, 'right answer' still showing. how can clear next question?
thx pav
var currentquestion = 0; var words = [ ['how', 'are', 'you', 'today?'], ['what', 'would', 'you', 'like', 'for', 'breakfast?'], ['what', 'would', 'you', 'like', 'for', 'tea?'] ]; var correctinput = [ ['how today?'], ['what breakfast?'], ['what 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>
add:
document.getelementbyid('feedback').text = '';
at point want clear 'right answer'.
you tie onkeyup event listener on text box. way, when user starts typing next answer clear 'right answer'.
Comments
Post a Comment