how to increment value when dyanamically button click in javascript?

Question

when I click the like button the increment value incremented but it not working corresponding as the button incremented. How will do it?

index.html

<div class="row">
    <div class="col-md-4">
         <i class="fa fa-thumbs-up" onclick="count(this, '{{datas.id}}', '{{datas.user_id}}')" id="odd">
          </i>
          <span id="add"></span>
    </div>  
    <div class="col-md-4"></div>
    <div class="col-md-4 text-right">{{datas.post_date}}</div>
</div>

inbox.js

var counter=0;
function count(id, data, out)
{   
    counter++;
    var one = id.closest('.card-body');
    one.querySelector('#add').innerHTML = counter;    
}

Like button increment but not start from 1 it starts from previous number

Websites like this are usually connected to a database, where the data are being stored. So, when someone likes a post, it increments and saves the value in the database. Then it just refreshes the value (reads from database after change). This is not a JavaScript thing, unless you use server side JS like Node.js. Otherwise, you can save the data to a file locally and manage it like that. — Nogard
– Nogard, Commented Oct 8, 2020 at 17:04

Dipen Shah · Accepted Answer · 2020-10-08 17:06:39Z

1

You can not rely on global counter. You need to have each item specific counter. One of the approach you can take is to add data attribute on node itselft and update on each click, for example:

function count(id, data, out) {
  const counter = parseInt(this.getAttribute("data-counter") || 0) + 1; // read current counter
  this.setAttribute("data-counter", counter); // update counter

  var one = id.closest('.card-body');
  one.querySelector('#add').innerHTML = counter;
}

<div class="row">
  <div class="col-md-4">
    <i class="fa fa-thumbs-up" data-counter="0" onclick="count(this, '{{datas.id}}', '{{datas.user_id}}')" id="odd"></i>
    <span id="add"></span>
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4 text-right">{{datas.post_date}}</div>
</div>

answered Oct 8, 2020 at 17:06

Dipen Shah

26.2k1 gold badge37 silver badges61 bronze badges

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

4 Comments

Kumar R Over a year ago

I got error like "Uncaught TypeError: this.getAttribute is not a function".

Dipen Shah Over a year ago

@KumarR can you check if this is not null? It should be element. Try replacing this in method with id and see if that works.

Kumar R Over a year ago

Thank you for your timely helping. Now it's working i could not change the id value instead of this element. Any other possible way without using the set and get Attribute method.

Dipen Shah Over a year ago

You can create a dictionary of key value and in the event handler read and update correct value in the dictionary.

Collectives™ on Stack Overflow

how to increment value when dyanamically button click in javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related