2015-04-10 2 views
1

Я пытался создать простую страницу викторины с помощью Javascript. Иначе все прошло хорошо, но после запуска этого кода в браузере при нажатии кнопки «Отправить» текст DOM, появившийся в параграфе (через Script), исчезает сразу после вспышки. Я ожидал, что текст останется на экране до следующего действия. Помогите мне устранить эту проблему.Создание страницы викторины с использованием Javascript

Спасибо

Код

<!DOCTYPE HTML> 
<html> 
<head> 
<title> 
Quiz 
</title> 
    <script type = "text/Javascript"> 

function checkAnswers() 

     { 

      var myQuiz = document.getElementById("myQuiz"); 

      if (myQuiz.elements[ 2 ].checked) 
document.getElementById("demo").innerHTML = "Congrats, Thats the Right answer"; 

       else 

      document.getElementById("demo").innerHTML = "Woops!! The Correct answer is 'Mouse'.<br>Click 'Next' to Proceed"; 

     } 

</script> 

</head> 
<body> 
<br><br><br><br><br><br> 
<form id = "myQuiz" onsubmit = "checkAnswers()" action = ""> 

Which among the following is readily found in computers ? 
<br><br><br> 
<input type = "radio" name = "radiobutton" value = "A" /><label> Zebra</label> 

<input type = "radio" name = "radiobutton" value = "B" /><label> Girrafe</label> 
<br><br> <input type = "radio" name = "radiobutton" value = "C" /><label>Mouse</label> 

<input type = "radio" name = "radiobutton" value = "D" /><label>Mosquito</label> 

</div><br><input type = "submit" name = "submit" value = "Submit" /> 
<br> 

<p id = "demo" "> </p> 
</form> 
</body> 
</html> 
+0

Если вы не хотите отправлять результаты на сервер, просто используйте кнопку вместо отправки. Если вы хотите отправить, ваш код сервера должен также написать текст на странице. –

ответ

0

Внести следующие изменения:

HTML

<form id = "myQuiz" onsubmit = "checkAnswers(event)" action = ""> 

JS

function checkAnswers(event) { 
    event.preventDefault(); 
    ... 
} 

preventDefault отменяет событие отправки формы, которое вызывает перезагрузку страницы, и текст исчезает.

DEMO

0

Просто вернуть "ложь" внутри onSubmit параметра, например:

<form id = "myQuiz" onsubmit = "return false" action = ""> 

И вызовите функцию checkAnswers(), когда кто-то нажимает на кнопку;

<input type = "submit" name = "submit" value = "Submit" onclick="checkAnswers()" /> 
+1

спасибо @theMarceloR –

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