2

有两个数字。用户填写答案并点击输入或“下一步”按钮（激活表单）

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

你可以在这里看到它：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;
    });
});
4

3 回答 3

3

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

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用 number覆盖该函数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在下一次被调用时仍然是 a 。

于 2012-12-21T18:31:40.963 回答
0

无需返回false。这 -(theAnswer==correctAnswer) 已经是假的，脚本知道..所以删除返回假的行。

于 2012-12-21T18:27:17.137 回答
0

看来你需要prevetDeafult整个提交动作，还有重新定义最大数字的问题，我解决了重新定义，使用本地化变量：

$(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;
    });


});​

演示

于 2012-12-21T18:39:26.517 回答