javascript - trying to figure out how to load a fucntion after an onclik even -
<!doctype html> <html> <head> <script src="jquery-2.1.3.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="webpage.css"> <style type="text/css"> #mycanvas {left: 500px; top:500px; border: 2px solid black;} </style> <title>canvas basics</title> </head> <body> <canvas id="mycanvas" width="750" height="250"> </canvas> <br> <span id="count">3</span>seconds <button id="next">play</button> </body> </html> <script type="text/javascript"> var can; var ctx; var finish=false; function rannum(max) { return math.ceil(math.random()*max)+1; } window.onclick= function() { (function () { var counter = 3; setinterval(function () { counter--; if (counter >= 0) { span = document.getelementbyid("count"); span.innerhtml = counter; } if (counter === 0) { alert('sorry, out of time'); clearinterval(counter); } }, 1000); })(); } $(document).ready(function(){ var nextbtn = document.getelementbyid('next'); nextbtn.addeventlistener('click',next,false); can = document.getelementbyid('mycanvas'); ctx = can.getcontext('2d'); x1 = 0; x2 = 0; x3 = 0; x4 = 0; ctx.beginpath(); ctx.moveto(can.width-100, 0); ctx.lineto(can.width-100, 400); ctx.stroke(); ctx.fillstyle="red"; ctx.fillrect(x1,50,50,25); ctx.fillstyle="blue"; ctx.fillrect(x2,100,50,25); ctx.fillstyle="orange"; ctx.fillrect(x3,150,50,25); ctx.fillstyle="green"; ctx.fillrect(x4,200,50,25); function next() { var = rannum(10); var b = rannum(10); var c = rannum(10); var d = rannum(8); if (x1 <200) { ctx.clearrect (0,0, can.width, can.height); } else { ctx.clearrect (120,0, can.width, can.height); } //ctx.clearrect (0,0, can.width, can.height); x1+= a; x2+=b; x3+=c; x4+=d; ctx.fillstyle="red"; ctx.fillrect(x1,50,50,25); ctx.fillstyle="blue"; ctx.fillrect(x2,100,50,25); ctx.fillstyle="orange"; ctx.fillrect(x3,150,50,25); ctx.fillstyle="green"; ctx.fillrect(x4,200,50,25); ctx.beginpath(); ctx.moveto(can.width-100, 0); ctx.lineto(can.width-100, 400); ctx.stroke(); //context.font="16px ariel"; //context.fillstyle="black"; if (finish == false) { if (x1 > 625) { //ctx.filltext("red winner",10,80); winner(x1); } else if (x2 > 625) { //ctx.filltext("blue winner",10,80); winner(x2); } else if (x3 > 625) { //ctx.filltext("orange winner",10,80); winner(x3); } else if (x4 > 625) { //ctx.filltext("green winner",10,80); winner(x4); } //ttimeout(next, 40); } settimeout(next, 40); } function winner(temp) { ctx.fillstyle= "black"; finish=true; ctx.font="30px arial"; ctx.filltext("winner!", 10,80); //alert(x1,x2,x3,x4); switch(temp) { case x1: ctx.fillstyle="red"; ctx.filltext("red", 10,150); break; case x2: ctx.fillstyle="blue"; ctx.filltext("blue", 10,150); break; case x3: ctx.fillstyle="orange"; ctx.filltext("orange", 10,150); break; case x4: ctx.fillstyle="green"; ctx.filltext("green", 10,150); break; default: alert(""); } } }); </script> i have code creates grid of numbers. if click on number changes green, click on again turns red. need know how create button changes green , changes red..... part before not count trying race start after button clicked , count down reaches 0?
you can following:
use
blackclass start , assignred,greenclasses on button presses$(".mydiv").on("click", function() { if ($(this).hasclass("black")) { $(this).addclass("green"); } else if ($(this).hasclass("green")) { $(this).addclass("red"); } else if ($(this).hasclass("red")) { $(this).addclass("black"); }color using css
change buttons using class
$(".green").removeclass("green").addclass("red");
Comments
Post a Comment