如何通过单击按钮调用JavaScript函数并在循环文本框中执行操作？

Question

I'm new in javascript and I want to know how to perform some math operations per row in the table by clicking the button.

The textboxes in the column "Variable" are created by a while loop, and I want to iterate the operation over two values one value from the first textbox in the array (variable 1) and the another from the second one (variable 2) so I need to sum or substract the two numbers depending of the button.

how can I make the javascript functions to call it by clicking the button?

In my example I have a "Case statement" getting the id from my table "operations" where if the id is 1 it has to sum, 2 it has to substract, 3 it has to make a multiplication.

for example I have three rows:

---

1. Indicador 1 = Variable 1 + Variable 2 ---> click the button ----> show the result of the sum.
2. Indicador 2 = Variable 3 - Variable 4 ---> click the button ----> show the result of the substraction.
3. Indicador 3 = Variable 5 * Variable 6 ---> click the button ----> show the result of the multiplication.

and so on

You can see the table I have.

If I missed something let me know.

This code display the table above.

        <form action="ingreso-datos-exe.php" method="post"> 
              <input type="hidden" value="<?php echo $iduser;?>"  name="iduser"/>
         <table id="tabla-registros" class="table table-striped table-bordered responsive">
   <thead>
        <tr>
         <th>Indicador</th>
          <th>Variables</th>
           <th>Result</th>
          <th>Compute Operation</th>
          </tr>
          </thead>
          <tbody>



        <?php

        //to get the indicator's name in the first column of the table

        while($r = mysql_fetch_assoc($checkSQL)) {
                $id_indicador= $r['id_indicador'];
                $nombre= $r['nombre_indicador'];
                $id_calculo= $r['id_calculo'];
                echo $id_indicador.$nombre.'</br>'; ?>

        <td><?php echo $id_indicador.$nombre;?></td><td>
          <table>
         <tr>

        <?php   

            // To get the variable's name in the second column of the table     
            while($r2 = mysql_fetch_assoc($checkSQL2)) {
                $nombre_variable= $r2['nombre_variable_medicion'];
                $idvariable= $r2['id_variablemedicion'];
                //  var_dump($r2);
                                             ?>

    <th><?php echo $nombre_variable;?></th>
    <td width=60px><input type="text" value="" class="price" name="valor[<?php echo $idvariable; ?>]"/></td> 

    <input type="hidden" value="<?php echo $id_indicador;?>"  name="id_indicador[<?php echo $idvariable; ?>]"/>
   <input type="hidden" value="<?php echo $idvariable;?>"  name="id_variable[<?php echo $idvariable; ?>]"/>

      <?php     } ?>


                        </tr>
                        <tr>

           </tr> 

          </table>

  <?php switch($id_calculo){ 

                            case '1':?>
                                <td><input class="btn btn-success" type="button" name="btnSum" value="Sum"    OnClick="fncSum();"></td>


                           <?php  break; ?>


                          <?php case '2':?>
                          <td><input class="btn btn-success" type="button" name="btnSum" value="substract" OnClick="fncSum();"></td>


                           <?php  break; ?>

                          <?php case '3':?>
                         <td><input class="btn btn-success" type="button" name="btnSum" value="multiplication" OnClick="fncSum();"></td>


                          <?php  break;
                           } ?>
                           <?php    echo '</td>'.'</tr>';
                          }
                                ?>                  



</tbody>

</table>


        </form> 

Answer 1

//returns parent row for the button
function getRow(el) {
    var row = el.parentNode.parentNode;
    return row;
}

//returns number from val1
function getVal1(row) {
    return +row.querySelector(".val1").value || 0
}

//returns number from val2
function getVal2(row) {
    return +row.querySelector(".val2").value || 0
}


//sets result
function setResult(row, val) {
    row.querySelector(".result").value = val
}

//do action
//reads action from the data-action attribute
function action() {
    var a = this.getAttribute("data-action");
    var row = getRow(this);
    var val1 = getVal1(row);
    var val2 = getVal2(row);
    var res = 0;
    switch (a) {
        case "sum":
            res = val1 + val2;
            break;
        case "substract":
            res = val1 - val2;
            break;
        case "multiplication":
            res = val1 * val2;
            break;
        default:
            throw new Error("Unknown action '"+a+"'");
    }
    setResult(row, res);
}

//adds click event for each btn-action elements after document loaded
window.addEventListener("load", function () {
    var btns = document.querySelectorAll(".btn-action");
    for (var i=0; i<btns.length; i++) {
        var btn = btns[i];
        btn.addEventListener("click", action);
    }
})

<table>
    <tr>
        <td>Item 1</td>
        <td><input class="val1"/></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Sum" data-action="sum"/></td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td><input class="val1" /></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Substract" data-action="substract" /></td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td><input class="val1" /></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Multiplication" data-action="multiplication" /></td>
    </tr>
</table>

</div>