多個按鈕在foreach循環中都有，但是只有第一個按鈕可以單擊。 如何使所有按鈕都可以單擊？

Question

<? foreach(.........){                      

<select id = "RelationshipSelect" name = 'RelationshipSelect' disabled>
                                //some codes implement                                                          
                        </select>`enter code here`

                        <input type = 'text' value = "<? echo ... ?>" id = "affectedSystems_0" name = 'affectedSystems_0' readonly> 

                                    <input type = "button" id = 'findAffectedSystems_0' value = 'Find' disabled>
                                        <input type = "button" id = 'removeAffectedSystems_0' value = 'Remove' disabled>


        <?}?>   

如圖中所示，CI關系字段數據是使用foreach循環檢索的。

在javascript文件中，我將“ findAffectedSystems_0”稱為查找按鈕ID，但它僅適用於“查找”按鈕的第一行。 如何使所有按鈕都可以單擊。

document.getElementById("findAffectedSystems_0").addEventListener("click", function (){
              //some codes work

});

Answer 1

你應該這樣

foreach ($variable as $key => $value) { // $variable should be array
        ?>
        <input type="button" class="common-class" name="findAffectedSystems_<?php echo $key ?>" id="findAffectedSystems_<?php echo $key ?>">
        <input type="button" class="common-class" name="removeAffectedSystems_<?php echo $key ?>" id="removeAffectedSystems_<?php echo $key ?>">
        <?php
    }

如果您需要對每個btn進行單獨的操作，請使用id屬性；否則，對於常見操作，應使用class屬性