Send ID of changed row in table (html to JS)

Question

I have 7 row and i need to use my function only for row which was edited. How can i send id? or maybe there are more easy way? I tried to send number of row id onChange="setprice(this.value,18,5)" last one is ID of row, but on split int+ string I can not detetct it as ID . For example: var idofrow = ('setvalue'+row); $("#idofrow").html("");. #idofrow does not work

function setprice(val, ay, row) {
  var rowid_ilk = event.target.getAttribute('id');
  $("#rowid_ilk").html("");
  var total = Math.round((((({{ price_without_symbol }  } - val) / ay) * ({{      kredittable.kredit_faiz / 100 }})) + (({{ price_without_symbol }} - val) / ay)));
  var rowset = 'setvalue' + row;
  alert(rowset);
  rowset.innerHTML += total;
}

<table class="table table-striped" id="tablebrd">
  <thead>
    <tr>
      <th scope="col">{{ text_kredit_mesac }}</th>
      <th scope="col" style="width: 28%">{{ text_min_vznos }}</th>
      <th scope="col">{{ text_mes_plata }}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden1" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,3,1)" /></td>
      <td>
        <div id="setvalue1"></div>
      </td>
    </tr>
    <tr>
      <td>6 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden2" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,6,2)" /></td>
      <td>
        <div id="setvalue2"></div>
      </td>
    </tr>

    <tr>
      <td>9 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden3" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,9,3)" /></td>
      <td>
        <div id="setvalue3"></div>
      </td>
    </tr>

    <tr>
      <td>12 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden4" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,12,4)" /></td>
      <td>
        <div id="setvalue4"></div>
      </td>
    </tr>

    <tr>
      <td>18 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden5" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,18,5)" /></td>
      <td>
        <div id="setvalue5"></div>
      </td>
    </tr>

    <tr>
      <td>24 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden6" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,24,6)" /></td>
      <td>
        <div id="setvalue6"></div>
      </td>
    </tr>

    <tr>
      <td>36 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden7" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,36,7)" /></td>
      <td>
        <div id="setvalue7"></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You can access the id of your changed element by accessing the target property of the event: event.target:

event.target is a reference to the object that dispatched the event

Then access its id name with .getAttribute. And remove the first seven letters of the id name to get the element's number with the method .substr.

event.target.getAttribute('id').substr(7)

---

Here's a quick demo:

const fn = function() {
  console.log(event.target.getAttribute('id').substr(7))
}

<div id="ilkoden11" onclick="fn()">This is item 11</div>

---

If you want to select the id of an element on the same level, you will need to do some navigating inside the HTML tree, the following selector will do that:

const div = event.target.closest('tr').querySelector('div').id;
                              ↑                  ↑
                        parent <tr>      find <div> child

Here is an example:

const setprice = function() {
  const target = event.target.id;
  const value = event.target.value;
  const div = event.target.closest('tr').querySelector('div').id;
  console.log(target, value, div)
}

<table>
<tr>
  <td><input id="ilkoden2" onkeyup="setprice()" /></td>
  <td>
    <div id="setvalue2"></div>
  </td>
</tr>
</table>