How to load a function after an onclick event

Question

<!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 a = 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 a code that creates a grid of numbers. If you click on the number it changes to green, click on it again turns to red. I need to know how to create a button that changes all to green and another that changes all to red..... the part before this does not count just trying to get the race to start after the button is clicked and the count down reaches 0?

Can you post additional information, such as sample html and the changeColor function? — yk11, Apr 19 '16 at 01:39
i dont know how to do that ive been trying and it just keeps say i need to add text inbetween — john handcock, Apr 19 '16 at 01:52

yk11 · Answer 1 · 2016-04-19T01:53:50.343

0

You can do the following:

Use black class to start with and assign red and green classes 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 all buttons using the class

$(".green").removeClass("green").addClass("red");

edited Apr 19 '16 at 01:53

answered Apr 19 '16 at 01:38

yk11

768
4
9

now i just need to add two buttons that when pressed turns all the days on the calendar green or if the second one is clicked turns them all red – john handcock Apr 19 '16 at 02:01

score 0 · Answer 2 · answered Apr 19 '16 at 04:29

0

Add a class to each "calendar day" element. For example:

<div class="myDiv">1</div>

But instead of "myDiv", I would recommend a more descriptive class name.

<div class="day-on-calendar">1</div>

Then, to select all the elements with that class:

$(".day-on-calendar")

And to change the color of all of them:

$(".day-on-calendar").css("color", "green");

To change the color when you click a certain element:

<button id="all-green-button">Turn all the dates green</button>

$("#all-green-button").click(function(){
    $(".day-on-calendar").css("color", "green");
});

answered Apr 19 '16 at 04:29

jkdev

11,360
15
54
77

i dont know where to put that in my code also the days in month dont have set divs i would have to change the whole code – john handcock Apr 19 '16 at 10:06
Put the HTML code wherever you want it to show up on the page. Put the jQuery code anywhere within the document.ready function. – jkdev Apr 19 '16 at 16:27
You shouldn't have to change the HTML very much. Just make sure each button has a unique ID (like "all-red-button" or "all-green-button") and each day on the calendar has a certain class ("myDiv" works for this, but you can use any class you want). – jkdev Apr 19 '16 at 16:32

How to load a function after an onclick event

2 Answers2