результат выводит слишком быстро

правильный или неправильный ответ и быстро исчезает. Как получить ответ на экран. Я хочу сохранить файлы html и js отдельно. То, что я хочу сделать позже, добавляет другие фразы в программу. Спасибо.результат выводит слишком быстро

Pav

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

источник

2015-04-19 user3739794

Ваша кнопка отправляет вашу форму на клик. Предотвратите его поведение по умолчанию или используйте '

Прежде всего не связывают нажмите событие, если вы хотите обрабатывать данные формы, формы посвятили мероприятие onsubmit. Когда форма отправляется по умолчанию, поведение браузера браузера - это переход к действию формы (в вашем случае перезагрузите страницу). Вам нужно предотвратить это, вернув false из обработчика onsubmit.

Исправленная HTML будет (я дал идентификатор к форме):

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

А потом обработку событий будет выглядеть так (обратите внимание 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>

источник

2015-04-19 14:16:15 dfsq

результат выводит слишком быстро

ответ

Смежные вопросы