Question

有两个数字。用户填写答案＆amp;点击进入或“下一步”按钮（激活表格）

我希望表单始终“返回false”，因为所有下一个操作都加载了javascript。只要用户一直填写正确的答案就可以了，但是当你填写错误答案时，它首先会显示“嘿你，这是什么？”框，但twhen用户尝试再次回答，整个页面是真实的：/

你可以在这里看到它： http://skolresurser.se/matematik/simple/

HTML

<form id="theChallenge">
    <h1>
        <span class="first">2</span>
        <span style="position: relative; top: 0.24em; margin: 0 6px;">*</span>
        <span class="second">6</span>
        <span style="margin-left: 0.13em; font-size: 0.8em; position: relative; top: -0.13em; margin-right: -0.60em;">=</span>
    </h1>
    <div id="notReally" style="display: none;">
        <h2>Not reeaaaaally:</h2>
        <span id="actually"></span>
    </div>
    <input type="number" class="answerInput"><br>
    <button class="2btn btn-large btn-success checkAnswer" href="#">Next</button>
</form>

JS：

$(function() {
    function biggestNumber() {
        return Math.max.apply(this, arguments);
    }

    $("#theChallenge").submit(function() {
        first = $(".first").text();
        second = $(".second").text();
        correctAnswer = parseInt($(".first").text()) * parseInt($(".second").text()); //parseInt = omvandla text till siffra.. och slå ihop de två alternativen!  och detta är då vårt rätta svar        
        theAnswer = $(".answerInput").val() //Vad har användaren skrivit in för svar?
        alert('first' + first);

        //Check if answer is correct
        if (theAnswer == correctAnswer) {
            //Create new numbers
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.first').text(randomNum);
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.second').text(randomNum);
        } else {
            //Show the person doing the test that
            $("#notReally").slideDown('fast');
            $("h1").slideUp('medium');

            biggestNumber = biggestNumber(first, second); //en funktion som är inlagd längre upp!!
            if (biggestNumber == first) { //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
                theOtherNumber = second;
            } else {
                theOtherNumber = first;
            }
            staplaUpp = theOtherNumber; //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till  " +siffran "
            for (var i = 0; i < biggestNumber - 1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
                staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>' + theOtherNumber;
            }
            $("#actually").append(staplaUpp);

        }

        $(".answerInput").val('');
        alert('first' + first);
        return false;
    });
});

Answer 1

通常，第二次提交时失败的表单表明您的javascript事件处理程序中存在错误，导致其无法返回false。要调试这些，在浏览器中使用javascript控制台并选择在页面之间导航时保留日志信息是很有用的。（此选项在webkit调试器中称为Preserve Log upon Navigation）。使用这种技术，我发现：

Uncaught TypeError: number is not a function skolresurser.se:137
(anonymous function)

看看那段代码，我可以看到问题出在这里：

biggestNumber = biggestNumber(first,second); //en funktion som är inlagd längre upp!!

当您将biggestNumber分配给自身的返回值时，会使用数字biggestNumber覆盖函数biggestNumber。然后，第二次单击“提交”按钮时，代码将失败。

相反，您应该将该返回值分配给另一个变量：

     var bigNum = biggestNumber(first,second); //en funktion som är inlagd längre upp!!
       if(bigNum==first){ //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
        theOtherNumber=second; 
       }else{
        theOtherNumber=first; 
       }
      staplaUpp = theOtherNumber;  //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till  " +siffran "

       for(var i = 0; i < bigNum-1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
            staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>'+theOtherNumber;
        }
       $("#actually").append(staplaUpp);

然后，biggestNumber功能在下次调用时仍为function。

Answer 2

无需返回false。这个 - （theAnswer == correctAnswer）已经为假，脚本知道..所以删除该行返回false。

Answer 3

似乎你需要prevetDeafult整个提交动作，还有重新定义maxNumber的问题，我解决了重新定义，使用本地化变量：

$(function() {
    function biggestNumber() {
        return Math.max.apply(this, arguments);
    }

    $("#theChallenge").submit(function(e) {


        e.preventDefault();  //<--HERE


        first = $(".first").text();
        second = $(".second").text();
        correctAnswer = parseInt($(".first").text()) * parseInt($(".second").text()); //parseInt = omvandla text till siffra.. och slå ihop de två alternativen!  och detta är då vårt rätta svar
        theAnswer = $(".answerInput").val() //Vad har användaren skrivit in för svar?

        //Check if answer is correct
        if (theAnswer == correctAnswer) {
            //Create new numbers
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.first').text(randomNum);
            var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
            $('.second').text(randomNum);
        } else {
            //Show the person doing the test that
            $("#notReally").slideDown('fast');
            $("h1").slideUp('medium');


            var biggestNumber = biggestNumber(first, second); //en funktion som är inlagd längre upp!! 
            //^--HERE


            if (biggestNumber == first) { //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
                theOtherNumber = second;
            } else {
                theOtherNumber = first;
            }
            staplaUpp = theOtherNumber; //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till  " +siffran "
            for (var i = 0; i < biggestNumber - 1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
                staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>' + theOtherNumber;
            }
            $("#actually").append(staplaUpp);

        }

        $(".answerInput").val('');
        alert('first' + first);
        return false;
    });


});

DEMO

return false仅在答案正确时才有效？

3 个答案: