배열의 값을 업데이트해야하지만 원래 값을 유지해야합니다.

Question

각 성분의 양을 변경하기 위해 래서 피를 업데이트하고 싶습니다. 첫 번째 값을 넣을 때 모든 것이 잘 작동하지만 이후에는 원래 값이 아닌 업데이트 된 값으로 업데이트됩니다. 원래 값을 유지하고 그들을 교환 할 수있는 두 번째 배열을 설정하는 시도했지만 작동하지 않았다. 다음은 스크립트 http://jsfiddle.net/a8YTa/3/의 라이브 버전입니다. 나는 jsfiddle이 제 질문을 분명하게 보이기를 바랍니다.

편집 : 여기가 원래 값으로 두 번째 배열을 설정하려고 한 버전이며 http://jsfiddle.net/a8YTa/5/

편집을 작동하지 않았다 : 여기에 요청 문제의 코드로 :

var numIngred = document.getElementsByClassName('ingred'); 
    var initServ = document.getElementsByClassName('servnumber')[0].innerHTML; 

    var newServ = document.getElementById('newserv'); 

    var divider = 0; 
    function changeServ(){ 
    divider = initServ/newServ.value; 
    var i=0; 
    for(i=0; i<numIngred.length; i++){ 
     numIngred[i].innerHTML = numIngred[i].innerHTML/divider; 
    } 

    } 

    newServ.oninput = changeServ; 

원래 값이

HTML :

Serves: <span class="servnumber">8</span><br/><br/> 
How many would you like to serve?:<input id="newserv" /> 
<br/><br/> 
<span class="ingred">1</span> Apple <br/> 
<span class="ingred">3</span> Peaches <br/> 
<span class="ingred">.5</span> Pineapples <br/> 
<span class="ingred">2</span>lbs nuts <br/> 
<span class="ingred">6</span> small peppers <br/> 

Answer 1

솔루션에 대한 문제는 배열 페이지에서 개체-참조로 구성되어 있다는 것입니다 : 그래서

var numIngred = document.getElementsByClassName('ingred'); //array of HTML elements 

, 당신이 numIngred[index].innerHTML을 수행 할 때, 그것은 속성의 현재 값을 액세스 할 수 있습니다.

이 문제를 해결하려면, 그냥 innerHTML을 객체에 아닌 참조의 실제 값 저장하는 새로운 배열을 만들 수 있습니다 http://jsfiddle.net/a8YTa/7/

Answer 2

당신은 마지막 배열에서 성분을 계산하는, 따라서 당신의 조리법은 곧 큰 박쥐 우산이 될 것입니다. :)

원본 구성 요소를 포함하고 변경되지 않은 채로 배열을 작성한 다음 값 (Amount to serve)이 텍스트 상자에 입력 될 때이 배열에서 새 값을 계산해야합니다.

희망이 도움이됩니다.

Answer 3

다음은

var defaultValues = []; 

for(var i = 0; i < numIngred.length; i++) { 
    defaultValues[i] = numIngred[i].innerHTML; 
} 

은 바이올린입니다

Re. 위의 귀하의 의견 : origingred는 numingred와 같습니다. 동일한 (라이브) span.ingred 요소가 포함 된 (라이브) 노드 목록입니다. 번호가 매겨진 변경 사항도 원래대로 변경됩니다.

실제 정적 데이터 소스가 필요합니다.

http://jsfiddle.net/EmWeG/

또는 마크 업에 추가 속성을 사용 :

이 같은 실제 배열에 개봉 된 성분을 저장할 수 중

<span class="ingred" data-orig="1">1</span> 

다음에 계산을 기반으로

parseFloat(numIngred[i].getAttribute('data-orig')) 
// i.e. numIngred[i].innerHTML = <the above>/divider;