结果输出消失得太快

Question

the correct or wrong answer outputs and quickly disappears. 正确或错误的答案输出并迅速消失。 How do I get the answer to remain on the screen. 如何获得答案以保留在屏幕上。 I want to keep the html and js files separate. 我想将html和js文件分开。 What I want to do later is add other phrases to the program. 我以后要做的是向程序中添加其他短语。

INDEX.HTML INDEX.HTML

<head> </head> 
<body>  
    <form  name="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>

PHRASESCRAMBLER.JS PHRASESCRAMBLER.JS

var words = ['how', 'are', 'you', 'today?'];
var correctInput = "how are you today";
var userInput = 'how are you today?';
var newWords = words.slice(0); 
shuffle(newWords); 
question();

function question() {
    var el = document.getElementById('phrase');
    el.textContent = newWords.join(' '); 
    document.getElementById("myBtn").onclick = checkAnswer;}

function checkAnswer() {
    var elMsg = document.getElementById('feedback');
    if (document.myForm.textinput.value == correctInput) {
        elMsg.textContent= "correct";}
    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;}

Answer 1

First of all don't bind click event if you want to handle form submission, forms have dedicated event called onsubmit . 首先，如果要处理表单提交，请不要绑定click事件，表单具有专用事件onsubmit 。 When form is submitted default browser behavior is to navigate to form action (in your case reload the page). 提交表单后，默认的浏览器行为是导航到表单操作（在您的情况下，请重新加载页面）。 You need to prevent this by returning false from the onsubmit handler. 您需要通过从onsubmit处理程序返回false来防止这种情况。

Corrected HTML will be (I gave an id to the form): 更正后的HTML将是（我在表单中输入了ID）：

<form name="myForm" id="myForm"> ... </form>

And then event handling will look like (note return false; in checkAnswer function): 然后事件处理将看起来像（注意return false;在checkAnswer函数中）：

 var words = ['how', 'are', 'you', 'today?']; var correctInput = "how are you today"; var userInput = 'how are you today?'; var newWords = words.slice(0); shuffle(newWords); question(); function question() { var el = document.getElementById('phrase'); el.textContent = newWords.join(' '); document.getElementById("myForm").onsubmit = checkAnswer; } function checkAnswer() { var elMsg = document.getElementById('feedback'); if (document.myForm.textinput.value == correctInput) { elMsg.textContent = "correct"; } else { elMsg.textContent = "wrong answer"; } return false; } 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; }

 <form name="myForm" id="myForm"> <div id ="phrase"></div> <input type = "text" id = "textinput" /> <button>Click here</button> <div id ="feedback"></div> </form>

结果输出消失得太快

问题描述

1 个解决方案

解决方案1
1 2015-04-19 14:16:15

结果输出消失得太快

问题描述

1 个解决方案

解决方案1 1 2015-04-19 14:16:15

解决方案1
1 2015-04-19 14:16:15