Change color and number onclick of a div

Question

I'd like to change a color and number of a html element on click of a div. For example, when you click up-arrow the number changes from 4 to 5 and the color changes as well.

initial state

↑ 4 ↓

upvoted

↑ 5 ↓

down voted

↑ 3 ↓

here's what I have so far.
I know how to change the color of a div on click, however I don't know how to change the color of a div from an onclick of a different div. And then on top of that add the +1 or -1.

http://jsfiddle.net/64QpR/23/

note- user:uneducatedguy just asked this same question however he deleted it because people were making fun of him since he called it a fiddle in stead of a jsfiddle.

Answer 1

Using Knockout this is really simple:

HTML:

<div class="arrow-up" data-bind="click: num.upvote.bind(num)"></div>
<h5 data-bind="text: num.value, css: { pink: num.changed }">3</h5>
<div class="arrow-down" data-bind="click: num.downvote.bind(num)"></div>

javaScript:

function Num(value) {
    this.value = ko.observable(value);
    this.changed = ko.observable(false);
}

Num.prototype.upvote = function() {
    this.value(this.value()+1);
    this.changed(true);
}

Num.prototype.downvote = function() {
    this.value(this.value()-1);
    this.changed(true);
}

var model = {
        num: new Num(1),
}

ko.applyBindings(model);

See it in action:

http://jsfiddle.net/bikeshedder/UvKsz/

With protection against multiple votes:

http://jsfiddle.net/bikeshedder/UvKsz/1/