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的实际值，而不是对对象的引用：

var defaultValues = [];

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

这是小提琴： http://jsfiddle.net/a8YTa/7/

Answer 2

你正在计算最后一个阵列的成分，因此你的食谱很快就会成为一个大问题。：）

您需要创建一个包含原始成分并保持不变的数组，然后在文本框中输入值（服务金额）时从此数组计算新值。

希望这有帮助。

Answer 3

重新。你的评论如上： origingred与numingred相同。它是一个（实时）节点列表，包含相同（实时）span.ingred元素。在numingred变化中改变它们也是原始的。

您需要的是真正的静态数据源。

你可以将你的成分存储在一个真正的数组中，如下所示：

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;

需要更新数组中的值，但保留原始值以再次更新它

3 个答案: