CODEWITHSUNDEEP
javascriptjqueryhtml
crlf
crlf

Reputation: 13

jquery two elements

I am new to jquery and javascript as a whole. I tried doing two things, but only one of them is working. I have to change the color, as well as increase the counter as explained below. Need help with the code. Examples -

1 click - 1
2 clicks - 11
5 clicks - 11111

Code - HTML

<div id="flash"> <p>hello</p>
    </div>
<div id="counter">0</div>​

Code - JAVASCRIPT

$(document).ready(function() {
$('p').click(function() {
    $(this).animate({
        'color': 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'
    }, 500);
});
$("#flash").click(function() {
    $('#counter').html(function(i, val) {
        return val * 1 + 1;
    });
});
});​

Code - CSS

p { font-weight: bold; display: inline; cursor: pointer; }​

Here is my code that I tried to play with - http://jsfiddle.net/crlf/pVHYc/

Upvotes: 0

Views: 117

Answers (2)

Vivek S
Vivek S

Reputation: 5550

solved both animate and output problem.

animate is due to not including jquery UI

output is wrong because you are trying to add but try concatenation

http://jsfiddle.net/pVHYc/4/

$(document).ready(function() {
 $('p').click(function() {
    $(this).animate({
        'color': 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'
    }, 500);
});
$("#flash").click(function() {
    $('#counter').html(function(i, val) {
        return val * 1 + 1;
    });
});
});

Upvotes: 0

Musa
Musa

Reputation: 97717

You have to include jQueryUI to animate colours with .animate()

For the counter you can concatenate 1s to it, just check if it is 0 and replace with 1 or concatenate a 1.

return val =='0'?1: val + 1;

see http://jsfiddle.net/pVHYc/6/

Upvotes: 2

Related Questions