Невозможно получить значения элементов строки с помощью Javascript

Я новичок в Javascript.

В качестве бэкенда используется django.

Я пытаюсь получить данные из столбцов таблицы, таких как 'доза', 'продолжительность' и 'использование', которые используют текстовое поле и флажок.

Когда я нажимаю на кнопку с id='qty', я вижу правильное значение для первого клика, но когда я нажимаю на кнопку для другого элемента, он по-прежнему представляет те же предыдущие данные вместо данных в той же строке.

Ниже приведен пример вывода, который я захватил из журнала консоли

#Item 1 Log
[Log] Object (e28c8d12-1a95-44e5-9813-dfc2f4bf3bb1, line 502)
code: ""
dose: "1"
name: "PARACIP"
price: undefined
quantity: "2"
total: NaN
usage: {morning: false, afternoon: false, evening: false, night: false, sos: false}


#Item 2 Log
[Log] Object (e28c8d12-1a95-44e5-9813-dfc2f4bf3bb1, line 502)
code: ""
dose: "1"
name: "Paracetamol"
price: undefined
quantity: "2"
total: NaN
usage: {morning: false, afternoon: false, evening: false, night: false, sos: false}
Object Prototype

HTML код

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Item</th>
            <th>Dose</th>
            <th>Duration</th>
            <th>Usage</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {% for item in inventory %}
        <tr>
            <td>{{ item.brand }} {{ item.item_name }}</td>
            <td>
                <input type="text" class="form-control" name="dose", id="dose">
            </td>
            <td>
                <input type="text" class="form-control" name="duration" id="duration">
            </td>
            <td>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="morning" name="morning">
                    <label class="form-check-label" for="morning">Morning</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="afternoon" name="afternoon">
                    <label class="form-check-label" for="afternoon">Afternoon</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="evening" name="evening">
                    <label class="form-check-label" for="evening">Evening</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="night" name="night">
                    <label class="form-check-label" for="night">Night</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="sos" name="sos">
                    <label class="form-check-label" for="sos">SOS</label>
                </div>
            </td>
            <td>
                <button class="btn btn-light bx bx-plus" type="button" id="qty" onclick="addItem({'dose':document.getElementById('dose').value,'quantity':document.getElementById('duration').value,'name':'{{item.item_name}}','code':this.name,'usage':{'morning':document.getElementById('morning').checked,'afternoon':document.getElementById('afternoon').checked,'evening':document.getElementById('evening').checked,'night':document.getElementById('night').checked,'sos':document.getElementById('sos').checked} })"></button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

Ниже представлен простой JS скрипт, который я использую

    function addItem(dataToAdd){
        console.log(dataToAdd);
        dataToAdd['price']=dataToAdd['price'];
        dataToAdd['total']=dataToAdd['price']*dataToAdd['quantity'];
    }

В вашем шаблоне есть строки типа

<input type="text" class="form-control" name="dose", id="dose">

Похоже, что каждый input не имеет своего уникального id, поэтому при нажатии на кнопку в любой строке вы получаете один и тот же результат. Решением может быть модификация части бэкенда примерно следующим образом:

<input type="text" class="form-control" name="dose", id="{{ item.somedoseid }}">

Другим решением может быть использование только чистого JS (если это удобнее или в качестве примера):

<button class="btn btn-light bx bx-plus" type="button" id="qty" onclick="
addItem({
'dose':this.parentNode.parentNode.children[1].firstElementChild.value,
'quantity':this.parentNode.parentNode.children[2].firstElementChild.value,
'name':'{{item.item_name}}',
'code':this.name,
'usage':{'morning':this.parentNode.parentNode.children[3].children[0].firstElementChild.checked,
'afternoon':this.parentNode.parentNode.children[3].children[1].firstElementChild.checked,
'evening':this.parentNode.parentNode.children[3].children[2].firstElementChild.checked,
'night':this.parentNode.parentNode.children[3].children[3].firstElementChild.checked,
'sos':this.parentNode.parentNode.children[3].children[4].firstElementChild.checked} })">BtnText</button>
Вернуться на верх