Question

在我的付款页面上，我需要两个输入，其总付款值为： -客户可以看到的 -另一个被隐藏了。

我编写了一个代码，当客户选中要付款的产品时，将每个元素的价格传递给输入，但是仅适用于一个输入。

我试图使用其他选项（例如getElementsByName和getElementsByClassName），但是我现在正在学习JS，但我不知道如何解决此问题。：（

function select(selector, parent){
  return Array.from((parent||document).querySelectorAll(selector));  
}

var inputs = select('.sum'),
    **totalElement = document.getElementById('payment-total');**

function sumUpdate(){
  totalElement.value = inputs.reduce(function(result, input){
    return result + (input.checked ? parseFloat(input.value) : 0);
  }, 0).toFixed(0);
}

我尝试过的事情：

var inputs = select('.sum'),
        **totalElement = document.getElementsByName('payment-total')[0][1];**

var inputs = select('.sum'),
            **totalElement = document.getElementsByName('payment-total, payment-total2')[0][1];**

var inputs = select('.sum'),
                **totalElement = document.getElementsByName('payment-total).getElementsByName('payment-totalTwo);**

Answer 1

如果我理解正确，那么您希望将计算值同时放在id="payment-total"元素和id="payment-total2"元素中。

如果是这样，则只需对payment-total做您已经做过的事情，但对于payment-total2也请参阅***注释：

var inputs = select('.sum'),
    totalElement = document.getElementById('payment-total'),
    totalElement2 = document.getElementById('payment-total2'); // ***

function sumUpdate(){
//vvvvvvvvvvvvvvvvvvvvvv---- ***
  totalElement2.value = totalElement.value = inputs.reduce(function(result, input){
    return result + (input.checked ? parseFloat(input.value) : 0);
  }, 0).toFixed(0);
}

我没有立即看到同时具有可见输入和隐藏输入的原因，但是如果您出于某种原因需要它，那就是您要这样做的方式。

如果到了要更新三个或三个以上元素的地步，我可能会给它们全部一个类，并按照选择.sum元素的方式选择它们，然后计算总数一次，并将其分配给所有这些对象。但是对于只有两个，重复查找和分配就可以了。

如何使用JS中的两个ID？

1 个答案: