在我的Javascript数组中放置代码

我有以下问题,

我制作了一个包含大量输入字段的表单。其中，如果用户键入1，它将立即在旁边显示价格。我的代码是：

var priceMargherita = 7;
    var numPizzaMargheritaInput = document.getElementById('countMargherita');
    var priceMargheritaLabel    = document.getElementById('totalMargherita');

    function onNumPizzaMargheritaInputChange(e){

        var totalMargherita = priceMargherita * parseInt(e.target.value);
        var formattedPrice = '\u20ac '+totalMargherita.toFixed(2);

        priceMargheritaLabel.innerHTML = '';
        priceMargheritaLabel.appendChild(document.createTextNode(formattedPrice));
    }
    numPizzaMargheritaInput.addEventListener('change', onNumPizzaMargheritaInputChange, false);

它的价格如下所示：

<td>Pizza Margherita</td>
<td><input type="number" id="countMargherita" class="formnumbers" name="PizzaMargherita" onChange="validateForm(this)" min="1" max="99"/></td>
<td><span id="totalMargherita"></span></td>

var pizzas = [
    {
        pizza: 'margherita',
        price: 7,
        input: 'countMargherita',
        label: 'totalMargherita'
    },
    {
        pizza: 'pepperoni',
        price: 10,
        input: 'countPepperoni',
        label: 'totalPepperoni'
    }
]

function calculatePrice(e, price, label) {
    var total = price * parseInt(e.target.value);
    var formattedPrice = '\u20ac '+total.toFixed(2);

    var outputElement = document.getElementById(label);
    outputElement .innerHTML = '';
    outputElement .appendChild(document.createTextNode(formattedPrice));
}

玛格丽塔比萨饼

现在我的问题是，我有11种像这种玛格丽特披萨的产品。目前我有11段代码，就像上面的一样。我认为这可以在数组中完成，因为唯一需要更改的是一些名称

如果我错了，请纠正我，因为我在JS和数组方面都没有经验

---

非常感谢您的帮助

我想你要找的不是数组，而是循环。下面是一种使用对象和循环对程序进行因子分析的方法：

var prices = {
  Margherita: 7,
  Hawaiian: 7,
  NewYork: 8
};

for (var pizzaType in prices) {
  var inputElement = document.getElementbyId('count' + pizzaType);
  var labelElement = document.getElementbyId('total' + pizzaType);

  inputElement.addEventListener('change', function(event) {
    var total = prices[pizzaType] * parseInt(event.target.value);
    var formattedPrice = '\u20ac ' + total.toFixed(2);

    labelElement.innerHTML = '';
    labelElement.appendChild(document.createTextNode(formattedPrice));
  }, false);
}

---

我选择使用匿名函数而不是命名函数，因为这是事件侦听器最常见的做法。

数组并不是解决问题的最有效方法。最好使用一个更通用的函数，该函数具有必要的信息（事件、价格和显示价格的元素ID）作为参数。然后使用一组对象初始化所有内容。大概是这样的：

<td>Pizza Margherita</td>
<td><input type="number" id="countMargherita" class="formnumbers" name="PizzaMargherita" onChange="validateForm(this)" min="1" max="99"/></td>
<td><span id="totalMargherita"></span></td>

var pizzas = [
    {
        pizza: 'margherita',
        price: 7,
        input: 'countMargherita',
        label: 'totalMargherita'
    },
    {
        pizza: 'pepperoni',
        price: 10,
        input: 'countPepperoni',
        label: 'totalPepperoni'
    }
]

function calculatePrice(e, price, label) {
    var total = price * parseInt(e.target.value);
    var formattedPrice = '\u20ac '+total.toFixed(2);

    var outputElement = document.getElementById(label);
    outputElement .innerHTML = '';
    outputElement .appendChild(document.createTextNode(formattedPrice));
}

然后迭代该

pizzas

数组以绑定所有内容：

for(var i = 0, l = pizzas.length; i < l; i++) {
    (function(pizza) {
        document.getElementById(pizza.input).addEventListener('change', function(e) {
            calculatePrice(e, pizza.price, pizza.label);
        }, false);
    })(pizzas[i]);
}

for（变量i=0，l=pizzas.length；i

---

上面使用闭包来避免由于JavaScript的变量作用域而产生的问题<代码>i的作用域为函数作用域，因为没有块级别的作用域。由于事件处理程序本质上是一个延迟操作，如果不使用，则执行时的

i

值也将是

i

的最后一个值。

使用一个更通用的函数来计算价格，如采用基本元素名称的onNumPizzChange，例如“margerita”。在此函数中，提取元素，如

var inputElm = document.getElementById('count'+elmBase);

然后通过将此函数包装为另一个函数来设置事件，如下所示：

document.getElementById('numPizzaMargheritaCount').addEventListener('change', function(){ onNumPizzaChange('Margherita')}, false);

这有意义吗

---

祝你好运

对我来说，最简单的方法是不使用数组或ID

如果可以更改html，则应将价格添加为数据属性，然后可以获得通用代码：

<td>Pizza Margherita</td>
<td><input type="number" class="formnumbers" name="PizzaMargherita"
           onChange="changeTotalFromCount(this)" min="1"
           max="99" data-unitPrice="7" /></td>
<td></td>

---

我不得不说这确实是一个有趣的代码。我不知道我是否做错了什么，但我无法让它工作。它只是向我展示了空的价格跨度。@Farewyth You可能是，或者我在编写代码时犯了一个错误（我没有测试它，这是我脑子里想不出来的）。我会看看我是否能在某个时候凑出一把小提琴来解决这个问题。编辑：看起来很好。没关系，问题就在我这边，谢谢你的努力！有一个问题，我已经在使用名为validateForm（this）的onChange事件。我可以像那样在onChange中添加另一个事件吗？没关系，明白了，它工作得很好，非常感谢