stackoom
  简体   繁体   中英

How can I run a script again without refreshing the whole page?

 原文  2013-08-18 00:23:21  6   3    javascript/ jquery/ html5/ css3

Question

If you look at greenb.byethost12.com you will see what I have developed so far. As of now, when you click on the correct answer, it document.location.reload(index.php) The whole page refreshes.

What I want is that just the content refreshes with a new set of numbers (run only the JavaScript).

Not sure if I'm making myself clear but any help will be gladly appreciated. Also any critiques are welcome since I might be making TON of errors that I haven't even seen yet. Cheers!

Code: 

<!DOCTYPE html>

MathMap 

    <div data-role="page" id="page1">
    <div data-theme="e" data-role="header">
    <a id="score" data-role="button" data-transition="none" href="#page1" data-icon="star"
    data-iconpos="left" class="ui-btn-right">
        Score
    </a>
    <h1>
        MathMap&trade;      
    </h1>
    </div>
<div align="center" data-role="content">
<div align="center"><h1 id="equal">

    </h1></div>
<div id="main" align="center" style="top: 150px;">
    <a id="a" data-role="button" data-theme="e" href="#page1" data-inline="true">

    </a>
    <a id="b" data-role="button" data-theme="e" href="#page1" data-inline="true">

    </a>
    <a id="c" data-role="button" data-theme="e" href="#page1" data-inline="true">

    </a>
    <a id="d" data-role="button" data-theme="e" href="#page1" data-inline="true">

    </a></div>
   <script>
     $(document).ready(function(){
     $("#main").hide().fadeIn(1000);
     });

     var x = Math.floor(Math.random()* 50);
     var y = Math.floor(Math.random()* 50);
     var a = Math.floor(Math.random()* 10);
     var b = Math.floor(Math.random()* 10);
     var c = Math.floor(Math.random()* 10);
     var d = Math.floor(Math.random()* 10);
     var divide =" \u00F7 "



     var problems = new Array();
     problems[0]=x+y;
     problems[1]=x-y;
     problems[2]=x*y;
     problems[3]=x/y;

     var split = new Array();
     split[0]=$("#a");
     split[1]=$("#b");
     split[2]=$("#c");
     split[3]=$("#d");

     var formula = new Array();
     formula[0] = x +" + "+ y +" = ";
     formula[1] = x +" - "+ y +" = ";
     formula[2] = x +" x "+ y +" = ";
     formula[3] = x + divide + y +" = ";

     var formrand = formula[Math.floor(Math.random()*formula.length)];
     var prorand = problems[Math.floor(Math.random()*problems.length)];
     var rand = split[Math.floor(Math.random()*split.length)];

        $("#equal").text(function myCalculation(){

              if ((formrand) == (formula[0])){
                $("#equal").text(formula[0]);
                $("#a").text(problems[0]+a);
                $("#b").text(problems[0]+b);
                $("#c").text(problems[0]+c);
                $("#d").text(problems[0]+d);
                $(rand).text(problems[0]);
                $("#a,#b,#c,#d").not(rand).click(function(){
                    $(this).transition({ opacity: 0.2, scale: 0.5});
                });
                $(rand).click(function(){
                $("#equal").text(formrand+problems[0]);
                $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
                $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
                    window.location.reload("index.php");
                });

                });


            }

               if ((formrand) == (formula[1])){
                $("#equal").text(formula[1]);
                $("#a").text(problems[1]+a);
                $("#b").text(problems[1]+b);
                $("#c").text(problems[1]+c);
                $("#d").text(problems[1]+d);
                $(rand).text(problems[1]);
                $("#a,#b,#c,#d").not(rand).click(function(){
                    $(this).transition({ opacity: 0.2, scale: 0.5});
                });
                $(rand).click(function(){
                $("#equal").text(formrand+problems[1]);
                $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
                $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
                    window.location.reload("index.php");
                });

                });

            }
              if ((formrand) == (formula[2])){
                $("#equal").text(formula[2]);
                $("#a").text(problems[2]+a);
                $("#b").text(problems[2]+b);
                $("#c").text(problems[2]+c);
                $("#d").text(problems[2]+d);
                $(rand).text(problems[2]);
                $("#a,#b,#c,#d").not(rand).click(function(){
                    $(this).transition({ opacity: 0.2, scale: 0.5});
                });
                $(rand).click(function(){
                $("#equal").text(formrand+problems[2]);
                $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
                $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
                    window.location.reload("index.php");
                });

                });

            }
              if ((formrand) == (formula[3])){
                $("#equal").text(formula[3]);
                $("#a").text(Math.round(problems[3]+a));
                $("#b").text(Math.round(problems[3]+b));
                $("#c").text(Math.round(problems[3]+c));
                $("#d").text(Math.round(problems[3]+d));
                $(rand).text(Math.round(problems[3]));
                $("#a,#b,#c,#d").not(rand).click(function(){
                    $(this).transition({ opacity: 0.2, scale: 0.5});
                });
                $(rand).click(function(){
                $("#equal").text(formrand+Math.round(problems[3]));
                $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
                $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
                    window.location.reload("index.php");
                });

                });
            }
        });






    </script>
</div>
<div data-theme="e" data-role="footer" data-position="fixed" data-inline="true">
    <h5>
        MathMap Learning
    </h5>
</div>
 </body>

3 answers

solution1
 0  2013-08-18 00:26:02

You should bind a function to the onClick event of the "correct answer". 

$('#idOfYourAnswer').on('click', function(){
    //Do something here
});

http://api.jquery.com/on/

solution2
 0  2013-08-18 02:45:49

Try using callbacks Or you can use functional loops where you end up calling the same functions again after an event occurs like trendy suggested you could use click events. 

start();
end();
$('button').click(function () {
     start();
     end();
});

So the problem would be created automatically the first time and then the application would wait on an event to create a new problem..or whatever you are using it for.

solution3
 0  2013-08-18 09:25:33

您可以使用setInterval（）来设置函数的超时时间，也可以将函数绑定到按钮的click事件。

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I auto-update a news feed with javascript without refreshing the whole page? How do I refresh a div with AJAX without refreshing the whole page? How to Change URL without refreshing the whole page How to reload this form without refreshing whole page? How to refresh div without refreshing whole page? How to update a tree without refreshing whole page? how i can i change the content of a page without refreshing I want to reload a datatable using ajax without refreshing the whole page How to add spliced values again to a list without refreshing the page How can I refresh the results of a MySQL query without refreshing the page?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM