無法使用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'];
    }

uj5u.com熱心網友回復：

在你的模板中，你有這樣的行

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

似乎每個輸入都沒有其唯一的 id，因此當您單擊任何行上的按鈕時，您會得到相同的結果。解決方案可能是修改后端部分，如下所示：

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

uj5u.com熱心網友回復：

另一種解決方案可能僅使用純 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>

標籤：javascript html 姜戈 django-模板

上一篇：電容閃屏影片

下一篇：添加新頁面功能無法正常作業。如何添加新頁面？姜戈