Как я могу остановить обновление моей страницы, когда я отправляю форму, не задерживая мою страницу как сумасшедшие?

Question

Я новичок в веб-разработке и пытаюсь создать простой тренажер формул, где вам нужно ввести точный ответ, и если он правильный, буква за буквой, вы получите другой вопрос, в противном случае вы повторите попытку. Теперь проблема в том, что когда вы вводите ответ в форму на моей главной странице, на которую ссылается код, при отправке страница обновляется. Как я могу это исправить? Я бы хотел, чтобы страница не обновлялась каждый раз sh, потому что тогда невозможно увидеть другие вопросы или проверить, правы вы или нет. В качестве альтернативы я читал что-то о базах данных, которые здесь являются решением, но я ничего об этом не знаю, поэтому было бы замечательно более простое решение.

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function() {
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")

Answer 1

Проблема заключается в поведении по умолчанию события формы submit. Убедитесь, что вы всегда возвращаете false из обработчика отправки, а также убедитесь, что вы предотвращаете поведение события по умолчанию.

Одна возможность:

<form onsubmit="event.preventDefault(); some_callback_calling_answerCheck();">

Кроме того, не называйте себя answerCheck рекурсивно (внутри else) он превратится из go в бесконечное l oop. И не регистрируйте новый обработчик submit при каждом вызове.

Вы хотите запускать answerCheck только тогда, когда 1) пользователь нажимает кнопку отправки (кнопка, клавиша ввода, ...) или 2) что-то изменено в поле ввода. Внутри него просто проверьте ответ и обновите вопрос.

Обновление: вот способ сделать это (базовая структура c и не тестировалась, вам нужно понять это и улучшить).

// wait for document ready event (jQuery)
$(function(){   
    // questions and answers, in order
    const qanda = [
        {"q": "Give the definition of a real function",  "a": "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image."},
        {"q": "...", "a": "..."}
    ];
    let currentIndex = 0; // current question displayed, index in the list

    // html elements: get them once and store them in variables 
    // for performance reasons
    const $question = $('p.question'); // where you display your question
    const $input = $('form input'); // your input for the answer
    const $rightwrong = $('.rightWrong'); // feedback

    // register on submit event
    $('.form1').submit(function(e){
        e.preventDefault(); // do not reload the page !
        let answer = $input.val(); // get the user's answer
        if(answer == qanda[currentIndex].a){
            // wright answer, move on:
            $rightWrong.text("good job");
            currentIndex += 1; // here, you would need to ensure you are not past the last question
            $question.text(qanda[currentIndex].q); // display next
        }else{
            // wrong answer
            $rightWrong.text("Wrong! Try again and check your answer for mistakes " + answer);
        }
        return false; // do not reload the page !
    });

   // finally, setup the first question
   $question.text(qanda[currentIndex].q);
});

В вашем HTML, у вас должно быть как минимум:

• форма form1 с одним вводом для ответа и кнопкой отправки (для активации события отправки)
• <p class="question"></p> для отображения вопрос
• а <p class="rightWrong"></p> по отзывам

Answer 2

Вы можете использовать event.preventDefault() в событии onSubmit, чтобы предотвратить отправку формы, что-то вроде этого -

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function(event) {

            // Prevent form submission on page refreshes.
            event.preventDefault();
    
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")