Question

正确或错误的答案输出并迅速消失。如何得到保留在屏幕上的答案。我想保持html和js文件分开。我以后想做的是在程序中添加其他短语。

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

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

如果您想处理表单提交，首先不要绑定点击事件，表单有专门的事件onsubmit。提交表单时，默认浏览器行为是导航到表单操作（在您的情况下重新加载页面）。您需要通过从onsubmit处理程序返回false来防止这种情况。

更正的HTML将是（我给表单提供了一个ID）：

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

然后事件处理将如下所示（注意return false;函数中的checkAnswer）：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

结果输出消失得太快

1 个答案: