aviral garg aviral garg - 1 month ago 7
Javascript Question

Count Clicks using javascript for Multiple Button

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:

enter image description here

Answer

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>
Comments