JS更新顯示值不同於DOM值

Question

我有一個三個輸入框的列表： - 1：type range [id：29-range; for：amount29] - 2：type text [id：29;對於：rangeInput29] - 3：鍵入文字[class：PreisSumme，id：preis29]

所有這三個都通過onclick事件進行「鏈接/更新」，所以它們都會顯示相同的值（well Box三是基於方框1/2的值的乘法）。這工作沒有任何問題。

此外，我有一個函數「calctotal」貫穿所有的文本框（與類：PreisSumme）並計算值的總和。一般來說，這也適用。

問題：函數calctotal提取的值使用pageload上定義的「舊」值，而不是用戶更新的值。

function calctotal() { 
 
    var total = 0; 
 
    $('.PreisSumme').each(function(i, e) { 
 
    console.log(e); 
 
    var max = $(e).attr('value'); 
 
    total = parseFloat(total) + parseFloat(max); 
 
    console.log(max); 
 
    }); 
 
    console.log(total); 
 
    document.getElementById("total").value = parseFloat(total); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<input id='29-range' value=3 for='amount29' oninput='amount29.value=rangeInput29.value ; preis29.value=rangeInput29.value* PreisProd29 ; calctotal();' type='range' min='0' max='25' name='rangeInput29' /> 
 

 
<input id='29' style='width: 4em;' type='text' value='3' name='amount29' for='rangeInput29' oninput='rangeInput29.value=amount29.value ; preis29.value=amount29.value * 2; calctotal();' /> 
 

 
<input class='PreisSumme' style='width:5em;' id='preis29' for='preis29' value='1' disabled/>

Answer 1

您正在閱讀的屬性value，而你應該閱讀財產value。因此，而不是.attr('value')可能是.prop('value')當然表單域，你應該只使用$.fn.val：

var max = $(e).val(); 

有屬性和特性之間的差異。在這種情況下，屬性不會被更新，爲什麼你改變輸入值。因此value屬性保持它初始化的值（defaultValue屬性）。