how to use php foreach loops for buttons that trigger JavaScript functions

Question

I am using js and php to build an app. I've used a foreach loop in php to create buttons for each row fetched from mysql table. Each button has a unique value (row id).

If someone clicks on of the buttons (each with unique id), there will be a total likes count that holds how many times a button is clicked.

If we have three buttons, and button 1 is clicked, then total likes will be increase by 1. if the same button is clicked again, then the value would decrease by 1.

However, if two buttons of different values are clicked, the total likes add.

When using js, I cant get each button id to pass to the js function loaded from the foreach loop. only the last button value loads to the js function.

Here is what i've tried. the js works but it doesnt apply to each button of the foreach loop.

My Code

        <?php foreach($values as $value){ 
        $value['button_id'];

        <!-- button --->
        <button id="button"    
           class="button-<?= $value['button_id']; ?>"    
           value="<?= $value['button_id']; ?>"  
           onclick="showUser(this.value)" >LIKE
        </button>
        <!-- button --->

        } ?>
        
        
        <script>
            var i = parseInt(document.getElementById('button').value, 10);
            var x = i;
            function showUser(this.value) {
            /// changing value //
            if (x == i){
            i++;
            document.getElementById('button').value = i;
            
            }
            else {
            
             i = x;
             document.getElementById('button').value = i;
             
            }   
          }
        </script>

Here is an illustration explaining what I mean

Thanks in advance

There are a couple of way to do that. One is to create an array with starting values [0,0,0], and when the first button is click, you just toggle the value of the corespondent index [1,0,0]. When clicked again, toggle again to [0,0,0]. Total likes would be the sum of array elements. — vladatr
– vladatr, Commented Aug 31, 2017 at 5:31
Thanks @vladatr! thats very clever, can I kindly ask you to demonstrate. I'm not sure to to implement it. I'm thinking use associative array, to target each value? Thanks — mark
– mark, Commented Aug 31, 2017 at 5:41

vladatr · Accepted Answer · 2017-08-31 06:01:27Z

1

 <script>
        var likes = new Array();

        function calc(value) {
            if(likes[value] == 0 || !likes[value]) {
                likes[value]=1;
            } else {
                likes[value]=0;
            }

        var sum=0;
        for(i=0; i<likes.length; i++) {

            if(likes[i]==1){ sum ++ }
        }

        document.getElementById("total").innerHTML = sum;
      }

    </script>  


    <div id=total>0 </div>
 <?php 
    $values = [1,2,3]; //here you can generate values

 foreach($values as $value){ 


    ?>
    <button id="button"    
       class="button-<?php echo $value; ?>"    
       value="<?php echo $value; ?>"  
       onclick="calc(<?php echo $value; ?>)" >LIKE
    </button>
    <?php

    } ?>

answered Aug 31, 2017 at 6:01

vladatr

6266 silver badges15 bronze badges

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

1 Comment

mark Over a year ago

This is amazing work @vladatr! thanks so much. Exactly what I was looking for. thanks a lot for your help.Do you know any good articles that explains these kinds of clearly executed methods in js? Thanks

Collectives™ on Stack Overflow

how to use php foreach loops for buttons that trigger JavaScript functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related