Change text in DIV on click with javascript

Question

I have a button with text in it. When clicking this button it will be disabled (not clickable) after 3 clicks. Also the button text must changes at each click.

See my example (press render to see it work): http://jsbin.com/univu3/edit#source

Now I want this same functionality but then with a DIV. This is my javascript code I have cooked up so far:

//Hint
function hint() {
var count = 3

if(count==0) {
        $(this).addClass('disabled');
    };

My div:

<div class="ht">HINT (3)</div>

So after 3 clicks the (3) must be (0) and the class "disabled" must be loaded (making the div look like it is disabled.

Any ideas how tp pull this off?

Thank you for your time

ps I use jQuery too

Your example works just fine for me. What is the question exactly? — JohnFx
– JohnFx, Commented Jan 26, 2012 at 22:38

Brent Anderson · Accepted Answer · 2012-01-26 23:29:49Z

1

Nice and short.[updated]

$('.ht').click(function(){
    var $this = $(this);
    var pos = parseInt($this.text().match(/\d+/g)[0]) //use regex to pull the number out;

    if(!pos) return false;

    $this.text($this.text().replace(pos, --pos))

    if(!pos){
        $this.addClass('disabled');
    }
})

http://jsfiddle.net/brentmn/MsQMs/1/

edited Jan 26, 2012 at 23:29

answered Jan 26, 2012 at 22:53

Brent Anderson

9664 silver badges6 bronze badges

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

1 Comment

Brent Anderson Over a year ago

Thanks for catching that. I updated the answer and the fiddle.

Mike · Accepted Answer · 2012-01-26 22:38:31Z

1

You could make something like this:

var count=0 
$('.ht').click(function (){    
count++;    
if (count == 1){$('.ht').html('hint 1');}    
if (count == 2) {$('.ht').html('hint 2');}    
if (count == 3) {$('.ht').html('hint 3');
$(.ht).addClass('disabled');} 
});

answered Jan 26, 2012 at 22:38

Mike

3,0241 gold badge37 silver badges47 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2012-01-26 22:43:15Z

0

var hintcount = $('.ht span'),
    availableHint = hintcount.html() | 0;

$('.ht').on('click.threetimes', function() {
   if (availableHint--) {
       hintcount.html(availableHint);
   }
   else {
       $(this).off('click.threetimes').addClass('disabled');
   }
});



<div class="ht">HINT (<span>3</span>)</div>

answered Jan 26, 2012 at 22:43

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Comments

Jeffrey Sweeney · Accepted Answer · 2012-01-26 22:43:32Z

Here's how I would do it (no JQuery):

<!DOCTYPE html>
<html>
<head>
<title></title>

</head>
<body>

<div id="div">Stop clicking me!</div>

<script>

document.getElementById("div").addEventListener("click", function listener() {

    //Get the current 'clicksSoFar' attribute on the div.
    var clicks = +this.getAttribute("clicksSoFar");

    //Add to its number of clicks.
    clicks++;

    //If it's greater or equal to 3,
    if(clicks >= 3) {

        //Gray out the div here (or something) and remove the listener

        // --- YOUR CODE HERE ---

        this.removeEventListener("click", listener, true);

    }

    //Set the clicksSoFar attribute to the new number of clicks
    this.setAttribute("clicksSoFar", clicks);


}, true);

</script>

</body>
</html>

Collectives™ on Stack Overflow

Change text in DIV on click with javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related