Question

My aim is to acheive something like this http://corkboard.me/GlJTVkD34A, when the button that changes the background is clicked both the background of the note and the image in the button are changed.
At the momemt i’ve been able to get the exact same thing, the onclick event on the note, the div that pops up on top but i tried to change the background by putting all the classes in an array like below and it hasn’t worked.
I still have no idea how to make the button image change simultaneously with the note’s background.

//nbg is the button above that is to be cliked to change the backgound
var nbg = $('#nbg');
var count = 0;
nbg.each(function() {
    var thisnotice = $(this);
    thisnotice.click(function() {
    var notice_classes =['changeablenbg_yellow','changeablenbg_green','changeablenbg_pink','changeablenbg_purple','changeablenbg_blue'];
        if(notice_classes[count] === "changeablenbg_blue") {
        var count = 0
        }
    //#box is the note div itself
    $('#box').toggleClass(notice_classes[count]);
    count++;
    }); 
}); 

I also tried to loop the array using a for loop but to no avail..
Can someone who knows please guide me on doing this. I’m sorry if i haven’t explained it well enough, please ask anything you don’t understand.

Answer 1

You’ve kinda got some weird things going on in your code, but the biggest is that you’re toggling which is like a light switch. Press it, and it turns on and it stays on. Press it again and it turns off. Here you press and it turns on and switches to the next color, and then you press and it turns on the second getting in the way of the first.

Then you’ve got the dual count problem. You’re stepping through each color for each NBG but only changing box. Resetting the local count but not the bigger one.

My best advice, step through each line of code as if the computer were running it, and think what does this specific line do. Does it do what I think it does?

Is that helpful?