Adding text to reputation counter

Hi!

First, I'm not too sure this was the right place to post, my apologies if this topic shouldn't go here.

What I'm trying to do is add a text to the reputation counter, so that it looks like this before voting:



And like this once you have:



(I have removed the thumbs down option as well as the vote bar with CSS).

I tried just adding the string to the JS, like this:

Code:


$(function(){
  for (var vote = $('.vote'), i = 0, j = vote.length, bar, total, percent, n_pos, n_neg; i < j; i++) {
    bar = $('.vote-bar', vote[i])[0];

    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');

      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }

    vote[i].insertAdjacentHTML('afterbegin', '<span class="vote_num vote_good">' + n_pos + ' me gusta ' + '</span>');
    vote[i].insertAdjacentHTML('beforeend', '<span class="vote_num vote_bad">' + n_neg + '</span>');

    $('a', vote[i]).click(function() {
      var that = this,
          links = $('a', that.parentNode);

      $.get(that.href, function() {
        var n = that[/minus/.test(that.className) ? 'nextSibling' : 'previousSibling'];
        n.innerHTML = ++n.innerHTML;
        links.fadeOut();
      });


      links.attr('href', '#').css({
        opacity : 0.4,
        cursor : 'default'
      });

      return false;
    });
  }
});

But it seems it's not enough, as right now it does display the text, but the vote counter doesn't update properly. Once it's clicked, instead of showing the counter with the text, NaN appears (refreshing the page, though, makes the number of votes and text display correctly again).



Could anyone help me out with this, please? Thanks in advance!

Hi @Laura,

It's displaying NaN ( Not a Number ), because when the script adds the votes to .vote_num.vote_good it does some math on the innerHTML content, and since there's non-numerical text inside the element it returns NaN. Here's a quick example :

Code:

+'Hello' == NaN // Hello cannot be converted to a number
+'1' == 1 // the string is converted to a number

Here's the corrected script :

Code:

 
$(function(){
  for (var vote = $('.vote'), i = 0, j = vote.length, bar, total, percent, n_pos, n_neg; i < j; i++) {
    bar = $('.vote-bar', vote[i])[0];
 
    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
 
      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }
 
    vote[i].insertAdjacentHTML('afterbegin', '<span class="vote_num vote_good">' + n_pos + '</span><span class="vote_good"> me gusta </span>');
    vote[i].insertAdjacentHTML('beforeend', '<span class="vote_num vote_bad">' + n_neg + '</span>');
 
    $('a', vote[i]).click(function() {
      var that = this,
          links = $('a', that.parentNode);
 
      $.get(that.href, function() {
        var n = that[/minus/.test(that.className) ? 'nextSibling' : 'previousSibling'];
        n.previousSibling.innerHTML = ++n.innerHTML;
        links.fadeOut();
      });
 
 
      links.attr('href', '#').css({
        opacity : 0.4,
        cursor : 'default'
      });
 
      return false;
    });
  }
});

I added the texts to a new separate tag, and added an extra step back in the node list. Let me know if it works okay for you.

Hi, @Ange Tuteur,

Thank you so much for taking the time to help me.

I've switched to your code and here's what I'm getting now:

Whoops I frogot to add previousSibling to the increment. Try now :

Code:

$(function(){
  for (var vote = $('.vote'), i = 0, j = vote.length, bar, total, percent, n_pos, n_neg; i < j; i++) {
    bar = $('.vote-bar', vote[i])[0];

    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');

      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }

    vote[i].insertAdjacentHTML('afterbegin', '<span class="vote_num vote_good">' + n_pos + '</span><span class="vote_good"> me gusta </span>');
    vote[i].insertAdjacentHTML('beforeend', '<span class="vote_num vote_bad">' + n_neg + '</span>');

    $('a', vote[i]).click(function() {
      var that = this,
          links = $('a', that.parentNode);

      $.get(that.href, function() {
        var n = that[/minus/.test(that.className) ? 'nextSibling' : 'previousSibling'].previousSibling;
        n.innerHTML = ++n.innerHTML;
        links.fadeOut();
      });


      links.attr('href', '#').css({
        opacity : 0.4,
        cursor : 'default'
      });

      return false;
    });
  }
});

That worked! Thank you so much, @Ange Tuteur!

You're welcome ! ^^