Javascript 按钮更改最终成本/价值

我已经创建了几个按钮，当我点击时，我想影响最终的成本，工作，但不是它应该的。按钮有一个值，成本的最终值不起作用，有人能告诉我我做错了什么吗

函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

$0.00
最终成本
标志
产品3
产品4

将点击事件附加到所有按钮上，并添加每次点击的成本，如下图所示

注意：如果您只想按按钮添加一次成本，您可以在单击后立即禁用该按钮，使用：

this.setAttribute('disabled','disabled');

希望这有帮助

var-products=document.querySelectorAll（“.buttonBg”）；
对于（变量i=0；i

。单击{
颜色：绿色；
}

$0.00
最终成本
标志
产品3
产品4
$0.00

我已经修改了您的代码，以使这项工作如下所示

下面的注意：我已将id添加到产品按钮

<div class="priceWrapper">
  <h3 class="priceText1" id="total">$0.00</h3>
  <h3 class="priceText2">Final Cost</h3>
</div>

<div class="item">
  <div class="itemProduct">
    <h4 class="itemText">
                        <span class="no_selection">Logos</span>
                    </h4>
  </div>

  <div class="itemHidden">

    <form action="" id="theForm">

      <label>
        <button class="buttonBg" id="product1" name="product" value="25.00" type="button">
          Producto 3
        </button>
      </label>

      <label>
        <button class="buttonBg" id="product2" name="product" value="10.00" type="button">
          Producto 4
        </button>
      </label>

    </form>
  </div>

在这里你可以看到最终的结果

---

为了扩展它，您将使用一个类和一个循环添加click处理程序，但是为了简单起见，我已经。。。保持简单。

因为在计算过程中，您会得到所有按钮的值，并将它们相加，因此每当单击按钮时，您都会计算按钮值的总和

据我所知，你现在的想法是错误的

您可以像这样更改html代码和脚本代码

通过这种方式，我们将button的对象传递给函数，并增加函数中的全局总变量。稍后您将更改dom

var total = 0;
            function totalIt(obj) {
                total = total + parseFloat(obj.value);
                document.querySelector(".priceText1").innerText = "$" + total.toFixed();
            }

并用

<button class="buttonBg" name="product" value="10.00" type="button"  onclick="totalIt(this)">

谢谢@ZakariaAcharki，我想我现在明白了，但是你可以无限次地点击产品，但应该只能点击一次，如果你点击两次，应该会再次删除金额。有可能吗？如果没有，它将继续增加更多的金额。谢谢朋友！几乎是：D但假设有人包含一个产品，但他们决定删除它，只需再次单击。如果他们最后真的想要它，第三次点击重新包含它。因此，第二次点击应该总是从最终价格中删除金额。然后再次单击以再次包含它。有道理？抱歉，哈哈，我自己解释得不好是的，你的解释很清楚，请使用flag类检查我的更新，然后从总数中添加或删除金额。你是最好的！！我现在要试着深入理解它，但它确实很好用：D！谢谢如果我提供了最终价格的两倍（在另一个不同的总跨度中也是以响应方式。比如说total2，这应该可以工作？var total=document.querySelector（#total，#total2”）；很高兴我可以帮助bro，不幸它不会以这种方式工作，但您可以简单地使用

document.querySelector（#total2”）.innerText=total.innerText；

，检查我的更新。。。

<button class="buttonBg" name="product" value="10.00" type="button"  onclick="totalIt(this)">