アレイ内の値を更新する必要がありますが、元の値をそのまま更新する必要があります

Question

各成分の量を変更するためにレシピを更新します。私は最初の値を入れたときにすべてうまく動作しますが、それ以降は元の値ではなく更新された値に対して更新されます。私は元の値を保持するために2番目の配列を設定しようとし、それらを交換するが、それは動作しませんでした。ここにスクリプト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プロパティの実際の値を格納するための新しい配列をない作成する必要があり、これを解決するために

、：

var defaultValues = []; 

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

ここではフィドルです： http://jsfiddle.net/a8YTa/7/

Answer 2

あなたが最後の配列から、あなたの成分を計算しているが、そのため、あなたのレシピはすぐに大きなドロドロになるとしています。 :)

元の成分を含む配列を作成し、変更しないで残しておき、値（分量）をテキストボックスに入力すると、この配列から新しい値を計算する必要があります。

これが役に立ちます。

Answer 3

Re。上記のあなたのコメント： origingredはnumingredと同じです。これは同じ（ライブ）span.ingred要素を含む（ライブ）ノードリストです。それらの番号を変更しても、元のままにしています。

本当に静的なデータソースが必要です。

このようにあなたは、実数配列にyoureの成分を格納することができ、次のいずれか

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;