How can i use one function on another inputs?

Question

I have a table in my code and i wanted to make changes about quantity section. I will add picture to show how it looks.

<tr><td><i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i>   <input type="button" id="sonuc" value="0" />   <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>   <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i></td></tr>

I have this code but i have problem in this situation i wrote some script code but it only works for first row of table. There is script code `enter code here

function arttir() {

    var sonuc = document.getElementById("sonuc");
    sonuc.value = Number(sonuc.value) + 1;
   
}

function azalt() {

    var sonuc = document.getElementById("sonuc");
    if (sonuc.value > 0) {
        sonuc.value = Number(sonuc.value) - 1;
        
    }
}

what can i do in this situation?

Answer 1

document.getElementById("sonuc") will return the first element with "sonuc" id.

You need to use document.getElementsByClassName('yourclassname') , then iterate over each element and set the value on each of them.

something like

function arttir() {
    let sonuc = document.getElementByClassName("sonuc");
    sonuc.forEach(elem=>elem.value = Number(sonuc.value) + 1);
}

Answer 2

You shouldn't have different html elements having the same id and by the way, the strategy of selecting the element having a given id cannot return a different element by magic depending on the rows.

You need to retrieve, inside your event listener, the element that triggered the click event. Here in this demo I used window.event.target . This demo just shows a scenario having two rows where each plus and minus button will trigger the increase/decrease of the value corresponding to each row.

 function arttir() { const clickedElement = window.event.target; const sonuc = clickedElement.closest('td').querySelector('input'); sonuc.value = Number(sonuc.value) + 1; } function azalt() { const clickedElement = window.event.target; const sonuc = clickedElement.closest('td').querySelector('input'); if (sonuc.value > 0) { sonuc.value = Number(sonuc.value) - 1; } }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <table> <tr> <td> <i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i> <input type="button" value="0" /> <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i> <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i> </td> </tr> <tr> <td> <i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i> <input type="button" value="0" /> <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i> <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i> </td> </tr> </table>