Count Clicks using javascript for Multiple Button

Question

This code counts 'clicks' for only first Product in the list fetch from the database but how they can produce 'clicks count' for Remaining products

 <?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = '';
$connect=mysqli_connect("localhost","root","","yii2_advanced");

$query = mysqli_query($connect,"SELECT * FROM product");

$dynamicList ="";
WHILE ($rows = mysqli_fetch_array($query)):


   $idr = $rows['product_id'];
   $product_name = $rows['product_name'];
   $product_amount = $rows['product_amount'];
   $product_type = $rows['product_type'];
    $dynamicList .= '   <script type="text/javascript">
var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
function onClick2(){

    if(clicks >0){
        clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;

}
else if(clicks == 0){

    document.getElementById("clicks").innerHTML = clicks;

}
};
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        Rs.' . $product_amount . '<br />
         <button onClick="onClick2()" type="button"><b>-</b></button>
<p style="display:inline-block;"><a id="clicks">0</a></p>
<button onClick="onClick()"><b>+</b></button>

        </td>
    </tr>
  </table>';
   endwhile;
   ?>

For better illustration I will show you image below:

1) don't tag jquery then use document.getElementById. 2) wire up your events via jquery instead of onclick=, that way you get a this. 3) use classes instead of IDs 4) store the click count on the element, not as a single global 5) use this to get the relevant clicks box $(this).closest("td").find("a").text(clicks) — fdomn-m
– fdomn-m, Commented Mar 31, 2016 at 11:12
You need to change your fiddle's javascript option to 'no wrap' (either option) otherwise the functions are private (did you test the fiddle?) — fdomn-m
– fdomn-m, Commented Mar 31, 2016 at 11:14

itzmukeshy7 · Accepted Answer · 2016-03-31 13:02:37Z

Try this ;)

    var clicks = {0:0, 1:0};

    function onClick(index) {
      clicks[index] += 1;
      console.log(index);
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }

    function onClick2(index) {

      if (clicks[index] > 0) {
        clicks[index] -= 1;
        document.getElementById("clicks" + index).innerHTML = clicks[index];

      } else if (clicks[index] == 0) {

        document.getElementById("clicks" + index).innerHTML = clicks[index];

      }
    }

<table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
    <td width="83%" valign="top">' . $product_name . '
      <br /> Rs.' . $product_amount . '
      <br />
      <button onclick="javascript:onClick2(0)" type="button"><b>-</b></button>
      <p style="display:inline-block;"><a id="clicks0">0</a></p>
      <button onclick="javascript:onClick(0)"><b>+</b></button>

    </td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
    <td width="83%" valign="top">' . $product_name . '
      <br /> Rs.' . $product_amount . '
      <br />
      <button onClick="onClick2(1);" type="button"><b>-</b></button>
      <p style="display:inline-block;"><a id="clicks1">0</a></p>
      <button onClick="onClick(1);"><b>+</b></button>

    </td>
  </tr>
</table>

UPDATE 1 FOR multiple items

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = '';
$connect = mysqli_connect("localhost", "root", "", "yii2_advanced");

$query = mysqli_query($connect, "SELECT * FROM product");

$dynamicList = "";
$index = 0;
while($rows = mysqli_fetch_array($query)):
  $idr = $rows['product_id'];
  $product_name = $rows['product_name'];
  $product_amount = $rows['product_amount'];
  $product_type = $rows['product_type'];
  $dynamicList .= '<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="%" valign="top"><img style="border:#666 1px solid;" src="' . $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        Rs.' . $product_amount . '<br />
         <button onClick="onClick2(' . $index . ')" type="button"><b>-</b></button>
<p style="display:inline-block;"><a id="clicks">0</a></p>
<button onClick="onClick(' . $index . ')"><b>+</b></button>
        </td>
    </tr>
  </table>';
  $index++;
endwhile;
?>

<script type="text/javascript">
  var clicks = <?php json_encode(array_fill(0, ($index - 1), 0)); ?>;
  function onClick(index){
    clicks[index] += 1;
    document.getElementById("clicks" + index).innerHTML = clicks[index];
  }

  function onClick2(index){
    if(clicks[index] > 0){
      clicks[index] -= 1;
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }else if(clicks == 0){
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }
  }
</script>

It is for two can u provide code for multiple products using php in javascript

Himel Nag Rana · Accepted Answer · 2016-03-31 12:54:32Z

Modified your fiddle with jQuery and cleaned PHP like: https://jsfiddle.net/574mL1z1/2/

The key problems are two:

You were trying to update same variable (clicks) on click of + and - buttons of both the products.
Somehow the code you are using in the fiddle for calling JS functions is not working.

I think in a cleaner way you can try:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
            Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id1" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id1">0</a></p>
             <button type="button" data-id="id1" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
             Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id2" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id2">0</a></p>
             <button type="button" data-id="id2" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

<script type="text/javascript">
$(".inc").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());
    clicks++;
    $("a#clicks_"+dataId).html(clicks);
});

$(".dec").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());

    if (clicks > 0) {
        clicks--;
    }
    $("a#clicks_"+dataId).html(clicks);
});
</script>

Collectives™ on Stack Overflow

Count Clicks using javascript for Multiple Button

2 Answers 2

1 Comment

I think in a cleaner way you can try:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

I think in a cleaner way you can try:

Comments

Your Answer

Sign up or log in

Post as a guest

Related