자바 스크립트 기능이

Question

임 양식 필드에 값을 찾기 위해 아래의 기능을 사용하려고 작동하지 않는, 그 이유는 루프 때문에 현장

자바 스크립트 함수의 ID에 차이가있을 수 있음을 의미 동적으로 형태 변경 난이 필드의 값을 변경할 때 그것이 모든 필드를 추가한다

onchange='totalProductPrice();' 

를 입력 필드의 하나에 다음

function totalProductPrice() { 
     var maxid = document.getElementById("field_id").value; 
     var i = 0; 
     var totalprice = 0; 

     while (i<=maxid) 
      { 
       totalprice += document.getElementById("QuoteItem" + i + "price").value; 
       i++; 
      } 

     document.getElementById("QuoteTotalcost").value = totalprice; 
    } 

이고 난 이 출력 불을 지르고의 콘솔에서, 나는 그것이 아무것도 안하려고 할 때하지만 QUoteTotalcost라는 필드에를 nsert

element.dispatchEvent is not a function 
[Break on this error] element.dispatchEvent(event); 
prototype.js (line 4619) 
document.getElementById("QuoteItem" + i + "price") is null 
[Break on this error] totalprice += document.getElementById("QuoteItem" + i + "price").value; 

Answer 1

그것은 당신이 null 객체에 속성을 읽기 위해 노력하고 있기 때문 않습니다. 개체가 있는지 확인해야합니다.

while (i <= maxid) { 
    var item = document.getElementById("QuoteItem" + i + "price"); 
    if (item != null) { 
    totalprice += parseFloat(item.value); 
    } 
} 

총계를 합산하는 다소 조잡한 방법입니다. 그 일반적으로 더 좋은 것은 이런 종류의 클래스를 사용하려면 반드시 그들이있어 독특한 등을 만들기 위해

var items = document.getElementByTagName("input"); 
for (var i=0; i<items.length; i++) { 
    if (items[i].className == "quote-item-price") { 
    totalprice += parseFloat(items[i].value); 
    } 
} 

그런 식으로 당신이 주변에 ID가 엉망이 없습니다 :

<input type="text" class="quote-item-price"> 

와

편집 : jQuery로 질문 태그를 지정했습니다. jQuery를 사용하면 훨씬 간단 해집니다.

var totalprice = 0; 
$("input.quote-item-price").each(function() { 
    totalprice += parseFloat($(this).val()); 
    // or 
    totalprice += parseFloat(this.value); 
}); 

편집 2 : 양식 필드 값은 문자열입니다. +을 사용하면 문자열 연결입니다. 모든 값을 숫자로 변환하려면 parseFloat()을 호출하도록 위 코드를 수정했습니다. toFixed()을 사용하여 고정 소수점 숫자로 변환해야 할 수 있습니다.

totalprice = totalprice.toFixed(2);