代码之家 › 专栏 › 技术社区 › Eugenio

按钮更改最终成本/价值

onclick html javascript

Eugenio · 技术社区 · 7 年前

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

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].click) {
      total += parseFloat(input[i].value);
    }
  }
  document.querySelector(".priceText1").innerText = "$" + total.toFixed(2);
}

<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" name="product" value="25.00" type="button">Producto 3</button>
      </label>

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

    </form>
  </div>

但是当我选择一个时,最终的价格不会完美地起作用。正在显示不同的数字!有人能帮我吗?

3 回复 | 直到 7 年前

Zakaria Acharki 7 年前

将单击事件附加到所有按钮,并在每次单击时添加成本,如下面的代码段所示。

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

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

希望这有帮助。

var products = document.querySelectorAll(".buttonBg");

for (var i = 0; i < products.length; i++) {
  products[i].addEventListener("click", totalIt);
}

function totalIt() {
  var total      = document.querySelector("#total");
  var currentVal = parseInt( total.innerText );
  var new_val    = parseInt( this.value );
  
  if( this.classList.contains('clicked') ){
    total.innerText = ( currentVal - new_val ).toFixed(2);
  }else{
    total.innerText = ( currentVal + new_val ).toFixed(2);
  }
  
  document.querySelector("#total2").innerText = total.innerText;
  
  this.classList.toggle('clicked');
}

.clicked{
   color: green;
}

<div class="priceWrapper">
  <h3 class="priceText1">$<span id="total">0.00</span></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" name="product" value="25.00" type="button">Producto 3</button>                      
      </label>

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

    </form>
  </div>
  <h3 class="priceText1">$<span id="total2">0.00</span></h3>

MartinWebb 7 年前

我已经修改了你的代码,使这项工作如下所示

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

然后我修改了你的代码

//
// this will be the element clicked so just add it, as below
//
function addProduct() {
  el = this;
  total += parseFloat(el.value);
  total_el.innerText = "$" + total.toFixed(2);
};
//
// Cache your total get a reference to the total element (faster!)
// when you write your code don't keep doing stuff when it can be done
// once - speed is everything and as you write more complex stuff
// doing it write from day one will pay off in your work (toptip)
//
var total = 0;
var total_el = document.querySelector(".priceText1");
//
// Bind up the click event
//
document.getElementById('product1').onclick = addProduct;
document.getElementById('product2').onclick = addProduct;

https://jsfiddle.net/64v3n1se/

为了扩展它,您可以使用类和循环添加click处理程序,但为了简单起见,我有。。。保持简单。

Zeromika 7 年前

因为在计算过程中,你会得到所有按钮的值并将其相加,所以每当单击按钮时,你都会计算按钮值的总和。

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

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

通过这种方式,我们将按钮的对象传递给函数,并增加函数中的全局总变量。稍后更改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)">