Setting a counter in a JavaScript function?

Question

Hey folks new to the site and to javaScript I am trying to add a counter for how many times the background color changes before the user clicks the button and the output how many time the color changed before they clicked the button. I have seen a lot of counters out there but nothing like what I am looking for, my code is below, any suggestions would be great

Thanks to all!!

P.S. my code does not work in IE, i have been using Fire fox

UPDATE: there is a bit more i need to do:

• Count how many colors are shown before the user clicks “I like this color” o Create a counter as global scope (outside of a function) o Increment the counter in the changeColor() function o When the user clicks the I like this color button, use local storage to store the count • Read from localStorage o When the document starts, access the count that was saved in the above step. If there is not any data – then this is the first time to the web site so there is no need to show the count.

I have updated the code to the answer that was given below

  <script type="text/javascript">

            var count = 0;

            var interval;



            function getRandom(num){

                return Math.floor(Math.random()*num);



            }



            function changeColor(){

                count ++;



                var num1 = getRandom(255);

                var num2 = getRandom(255);

                var num3 = getRandom(255);

                var col = "rgb("+num1+","+num2+","+num3+")";

                var div = document.getElementById( 'myDiv' );

                div.style.background = col;



            }



            function stop() {

                clearInterval(interval);

                alert('The background color has changed ' + count + ' times before you clicked me!');

            }



            interval = setInterval("changeColor()", 2000);



</script>





<style type="text/css">

.Div {

    position:absolute;

    width: 800px;

    height: 100px;

    z-index: 15;

    top: 50%;

    left: 15%;

    background: red;

}

</style>



</head>



<body onLoad="setInterval()">





<div id="myDiv" class="Div">

<input type="button" onClick="stop()", value="I like this color" align="absmiddle">

</div>

</body>

</html>

The getRandom function will return values from 0 to num - 1. If you want the full range of values, you need to pass it 256 or use Math.floor(Math.random() * ++num). — RobG
– RobG, Commented Feb 25, 2014 at 1:23
Usually you shouldn't update your post to add new questions. If your original question has been answered please consider to mark that answer as accepted (and when you'll have enough rep to upvote too). That done you may post a new question (and so on). — Adriano Repetti
– Adriano Repetti, Commented Feb 25, 2014 at 1:57
sorry new to the site, and all of this, will post a new question — user3349011
– user3349011, Commented Feb 25, 2014 at 2:00
I was about to forget: you should also show some effort (code you wrote, what you tried, searches you did), try to explain what you expect and what happens instead. Questions like "I have to do this and that. Can you tell me how/write some code for me?" very often are closed/downvoted and you won't get any answer. BTW Welcome to SO!!! :) — Adriano Repetti
– Adriano Repetti, Commented Feb 25, 2014 at 2:01

evalarezo · Accepted Answer · 2014-02-25 00:35:02Z

1

Try this:

<script type="text/javascript">
            var count = 0;
            var interval;

            function getRandom(num){
                return Math.floor(Math.random()*num);

            }

            function changeColor(){
                count ++;

                var num1 = getRandom(255);
                var num2 = getRandom(255);
                var num3 = getRandom(255);
                var col = "rgb("+num1+","+num2+","+num3+")";
                var div = document.getElementById( 'myDiv' );
                div.style.background = col;

            }

            function stop() {
                clearInterval(interval);
                alert('The background color has changed ' + count + ' times before you clicked me!');
            }

            interval = setInterval("changeColor()", 2000);

</script>
<div id="myDiv">
<input type="button" onClick="stop()", value="I like this color" align="absmiddle">
</div>

answered Feb 25, 2014 at 0:35

evalarezo

1,1538 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

It is considered poor form to pass a string to setInterval as it will call the Function constructor to wrap the string in a function. Just pass a reference to the function: setInterval(changeColor, 2000). :-)

Collectives™ on Stack Overflow

Setting a counter in a JavaScript function?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related