CODEWITHSUNDEEP
javascripthtmlarrays
kugyousha
kugyousha

Reputation: 2678

Need to update values in an array but keep the original values to update it again

I want to update a recipe to change the amount of each ingredient. Everything works fine when I put in the first value but after that, it updates against the updated values not the original values. I tried setting up a 2nd array to hold the original values and then exchange them but it didn't work. Here is a live version of script http://jsfiddle.net/a8YTa/3/. I hope seeing the jsfiddle makes my question clear.

Edit: Here is the version where I tried to set up a second array with the original values and it didn't work http://jsfiddle.net/a8YTa/5/

Edit: As requested here is the code in question:

  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 which has the original values:

 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/>

Upvotes: 1

Views: 143

Answers (3)

Ortiga
Ortiga

Reputation: 8824

The problem with your solution is that your array consists of references to objects in the page:

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

So, when you do numIngred[index].innerHTML, it access the current value of the property.

To solve this, you just have to create a new array to store the actual value of innerHTML, not a reference to the objects:

var defaultValues = [];

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

Here is the fiddle: http://jsfiddle.net/a8YTa/7/

Upvotes: 3

Flo
Flo

Reputation: 1965

Re. your comment above: origingred is the same as numingred. It's a (live) node list containing the same (live) span.ingred elements. Changing them in numingred changes origingred too.

What you need is a real static data source.

You could either store youre ingredient in a real array, like this:

http://jsfiddle.net/EmWeG/

or use extra attributes in your markup:

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

then base your calculation on

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

Upvotes: 0

Mark Walters
Mark Walters

Reputation: 12390

You are calculating your ingredients from the last array, thus your recipe is soon going to become a big mush. :)

You need to create an array which contains the original ingredients and remains unchanged and then calculate your new values from this array when a value (Amount to serve) is entered into the textbox.

Hope this helps.

Upvotes: 0

Related Questions