JavaScript錯誤：「輸入微調器無法讀取屬性'值爲空'多輸入

Question

我遇到了一個問題，我需要在同一頁面上的多個項目（具有唯一標識）的數量微調控制器。

實施例：

這是我使用的JavaScript，它完美地工作時，只有一個具有指定ID（product_quantity）輸入。但後來當我有多個項目，他們每個人都有唯一的ID的（當然），所以它不能

function updateSpinner(obj) 
{ 
    var contentObj = document.getElementById("product_quantity"); 
    var value = parseInt(contentObj.value); 
    if(obj.id == "down") { 
     value--; 
    } else { 
     value++; 
    } 
    contentObj.value = value >= 1 ? value : 1; 
} 

（例如在此琴發現：http://jsfiddle.net/AmanVirdi/hbP3y/）

HTML的單個元素我有這個工作：

<div class="quantity-controls"> 
    <a class="button" id="down" onclick="updateSpinner(this);">...</a> 
    <input type="text" name="quantity" id="product_quantity" value="1"> 
    <a class="button" id="up" onclick="updateSpinner(this);">...</a> 
</div> 

的HTML輸出2個動態輸入字段（各自具有與上述相同的周圍的HTML）：

<input type="text" class="qty-val" name="quantity[01]" id="product_quantity_01" value='1'> 
<input type="text" class="qty-val" name="quantity[02]" id="product_quantity_02" value='1'> 

我該如何修改javascript來處理類似這樣的事情？或者我應該採取不同的方法？

我也嘗試修改這個（但當時它只是沒有在所有的工作）：

function updateSpinner(obj) 
{ 
    var contentObj = document.getElementsByClassName("qty-val"); 
    var value = parseInt(contentObj.value); 
    if(obj.id == "down") { 
     value--; 
    } else { 
     value++; 
    } 
    contentObj.value = value >= 1 ? value : 1; 
} 

Answer 1

好吧，既然你在HTML中使用onclick事件處理程序中，你可以做一些事情llike此：

function updateSpinner(elem,obj) 
 
{ 
 
value = parseInt(obj.value); 
 

 

 
    if(elem.id.indexOf("down")>-1) { 
 

 
     value--; 
 
    } else { 
 
     value++; 
 
    } 
 
    obj.value = value >= 1 ? value : 1; 
 
}

a 
 
{ 
 
    text-decoration: none; 
 
    width:30px; 
 
    height:30px; 
 
    color:white; 
 
    background:green; 
 
    display:inline-block; 
 
    border-radius:50%; 
 
    text-align:center; 
 
    line-height:30px; 
 
}

<a id="down1" href="#" onclick="updateSpinner(this,this.nextElementSibling);">-</a> 
 
<input type="text" class="qty-val" name="quantity[02]" id="product_quantity_02" value='1'> 
 
<a id="up1" href="#" onclick="updateSpinner(this,this.previousElementSibling);">+</a><br> 
 
<a id="down2" href="#" onclick="updateSpinner(this,this.nextElementSibling);">-</a> 
 
<input type="text" class="qty-val" name="quantity[02]" id="product_quantity_02" value='1'> 
 
<a id="up2" href="#" onclick="updateSpinner(this,this.previousElementSibling);">+</a>

我已經使用這個和previousElementSibling和nextElementSibling - 將引用添加到當前按鈕和文本場。

Answer 2

您需要將+和 - 按鈕與顯示計數的相關輸入相關聯。我已經使用鏈接到ID的data-屬性，以便佈局獨立於腳本，還有其他方法。您還可以使用data-屬性來確定是添加還是從總數中減去。

可能想動態添加偵聽器，以下示例使用內聯偵聽器。

function update(element, num) { 
 
    var target = document.getElementById(element.dataset.id); 
 
    var value; 
 
    if (target) { 
 
    value = parseInt(target.value) + parseInt(num); 
 
    // Don't allow to go below zero 
 
    target.value = value > -1? value : 0; 
 
    } 
 
}

Item 1: <button onclick="update(this, 1)" data-id="item1">+</button><input type="text" id="item1" value="0"><button onclick="update(this, -1)" data-id="item1">-</button> 
 
<br> 
 
Item 2: <button onclick="update(this, 1)" data-id="item2">+</button><input type="text" id="item2" value="0"><button onclick="update(this, -1)" data-id="item2">-</button> 
 
<br> 
 
Item 2: <button onclick="update(this, 1)" data-id="item3">+</button><input type="text" id="item3" value="0"><button onclick="update(this, -1)" data-id="item3">-</button>