Iterate over array on click

Question

I'm creating an presentation. There is a div element which does change the font-size a lot. There are two buttons one should increase the color in the array and the other one should decrease it.

html:

 <input type="button" id="up" value="change color up">
    <input type="button" id="down" value="change color down">

    <div id="myValue">
   VALUE 
    </div>

Jquery:

     fancyColors = {
            1: "#9c9e9f",
            2: "#848e6f",
            3: "#778861",
            4: "#7da75d",
            5: "#7fa433",
            6: "#97bf0d"
        };


   $(function () { 

        var i;
        var valuE = $('#myValue');
        var getSize = $('#myValue').css("font-size");
        var getColor = $('#myValue').css("color");
        var down = $('#down');
        var up = $('#up');



        valuE.css("color", fancyColors[1]);
        down.on("click",function() {
            valuE.css("color", fancyColors[i]); // do i--
        });  


        up.on("click", function() {
            valuE.css("color", fancyColors[i]); // do i++
        });  
    });

I had a for loop but that didn't work out for me. I guess it should be pretty easy for a more experienced person. Thanks for your time.

$('#up') won't work because up is not id. Same goes for down. — Akash
– Akash, Commented Mar 31, 2014 at 7:26
@auL5agoi - It's an object, but the keys are numbers, so still works. — adeneo
– adeneo, Commented Mar 31, 2014 at 7:28

Anoop Joshi P · Accepted Answer · 2014-03-31 07:37:48Z

2

Try like this

fancyColors = [
     "#9c9e9f",
     "#848e6f",
     "#778861",
     "#7da75d",
     "#7fa433",
     "#97bf0d"
 ];
 var index = 0;
 $("#up").click(function () {
     index++;

     var i = fancyColors.length % index;
     $("#myValue").css("background-color", fancyColors[i]);
 });
 $("#down").click(function () {
     index--;
     var i = fancyColors.length % index;

     $("#myValue").css("background-color", fancyColors[i]);
 });

Demo

answered Mar 31, 2014 at 7:37

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

Comments

Amit Joki · Accepted Answer · 2014-03-31 07:34:33Z

Make your html as

<input type="button" id="up" value="change color up">
<input type="button" id="down" value="change color down">
<div id="myValue">VALUE</div>

And your js:

var fancyColors = [
    "#9c9e9f",
    "#848e6f",
    "#778861",
    "#7da75d",
    "#7fa433",
    "#97bf0d"];


$(function () {

    var i = 0;
    var valuE = $('#myValue');
    var getSize = valuE.css("font-size");
    var getColor = valuE.css("color");
    var down = $('#down');
    var up = $('#up');



    valuE.css("color", fancyColors[1]);
    down.on("click", function () {
        valuE.css("color", fancyColors[i]);
        i++ // do i--
    });


    up.on("click", function () {
        valuE.css("color", fancyColors[i]);
        i++ // do i++
    });
});

Live Demo: http://jsfiddle.net/jY24d/

user3451194 · Accepted Answer · 2014-03-31 07:40:49Z

0

You're a student, right? Well I won't do your homework for you, but I'll give you the following tips:

The buttons need ids
The iterator (i) needs a value before the function first executes
You can't define the click events to call a function inside the function itself

But I'm sure that's in your lecture materials anyway...

answered Mar 31, 2014 at 7:40

user3451194

12 bronze badges

Comments

Godly Mathew · Accepted Answer · 2014-03-31 07:46:58Z

 fancyColors = {
                1: "#9c9e9f",
                2: "#848e6f",
                3: "#778861",
                4: "#7da75d",
                5: "#7fa433",
                6: "#97bf0d"
            };

   $(function () { 

        window.colorIndex=1;
        var valuE = $('#myValue');
        var getSize = $('#myValue').css("font-size");
        var getColor = $('#myValue').css("color");
        var down = $('#down');
        var up = $('#up');
        valuE.css("color", fancyColors[1]);
        down.on("click",function() {

        if(colorIndex<1){colorIndex=6;}
            valuE.css("color", fancyColors[--colorIndex]); // do i--
        });  


        up.on("click", function() {

       if(colorIndex >6){colorIndex=1;}            
            valuE.css("color", fancyColors[colorIndex++]); // do i++
        });  
    });

Try this :)

marc_s · Accepted Answer · 2016-06-22 08:35:59Z

0

 $('#down').click( function(){ i++; });

You need to add an id attribute to your down input :

 <input type='button' id='down'>

That jQuery will match correctly with #down

edited Jun 22, 2016 at 8:35

marc_s

760k185 gold badges1.4k silver badges1.5k bronze badges

answered Mar 31, 2014 at 7:27

Charles-Antoine Fournel

1,7822 gold badges26 silver badges39 bronze badges

3 Comments

AME Over a year ago

I didn't add it here but in my source-code it's correct. sorry for mistake.

AME Over a year ago

Could you please paste the complete code in. I might have missed something. Thanks

Charles-Antoine Fournel Over a year ago

@auL5agoi, anoop did it for me :)

Collectives™ on Stack Overflow

Iterate over array on click

5 Answers 5

Comments

1 Comment

Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

3 Comments

Related