javascript - 实现选定项目的成本，然后总计

Question

我仍在尝试剖析我从这里获得的这段代码，效果很好，但我还需要在其中实现一个成本金额。

我有脚本设置来执行价格 * 数量，但我正在尝试弄清楚如何执行价格 - 成本 * 数量。

我是脚本编写新手，正在尝试解决这个问题

这就是 html 的样子

<select name="item" id="item" size="1">
              <option value="">Device</option>
              <option value="200.00">iPhone 4</option>
              <option value="300.00">iPhone 4S</option>
              <option value="450.00">iPhone 5</option>
              <option value="300.00">Galaxy S3</option>
              <option value="450.00">Galaxy S4</option>
              <option value="450.00">Galaxy Note ll</option>
              <option value="600.00">Galaxy Note lll</option>
              <option value="700.00">Galaxy S5</option>
              <option value="500.00">HTC One</option>
              <option value="650.00">HTC One M8</option>
            </select>
          </div></td>
          <td><div align="center">
            <div align="center"><span id="price"></span></div>
          </div></td>
            <td height="43">
                <div align="center"><span id="cost"></span></div>
            </td>
            <td>
                <div align="center">

                  <input name="qty" type="Text" id="qty" size="2" maxlength="3"/>
                </div>
            </td>


            <td>
                <div align="center">
                    <span id="result"></span>

这就是脚本的样子。

var phones = document.getElementById('phones');
var phones1 = document.getElementById('phones1');
var phones2 = document.getElementById('phones2');
var phones3 = document.getElementById('phones3');

item.onchange = function() {
        price.innerHTML = "$" + this.value;
        qty.value = 1; //Order 1 by default.
        add();
    };

function add() {
  var inputs = document.getElementsByTagName('input');
  var selects = document.getElementsByTagName('select');

  var total = 0;
  var taxes = 0;
  for (var i = 0; i < selects.length; i++) {
    var sum = 0;
    var price = (parseFloat(selects[i].value) )?parseFloat(selects[i].value):0;
    var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;
    sum += price * qty;
    total += sum * 1.06
    taxes += sum * 0.06
    if(i == 0){
      document.getElementById('result').innerHTML = "$" + sum;
    }else{

      document.getElementById('result'+i).innerHTML = "$" + sum;
    }             
  };

  document.getElementById('total').innerHTML = "$" + total.toFixed(2);
  document.getElementById('taxes').innerHTML = "$" + taxes.toFixed(2);

}

有没有办法，我可以在选项中合并第二个值并在脚本中使用对其的引用？我只能弄清楚。

我确实尝试添加

<option value="200.00" value2="100">iPhone 4</option>

然后将其放入脚本中，如下所示

item.onchange = function() {
    price.innerHTML = "$" + this.value;
    cost.innerHTML = "$" - this.value;
    qty.value = 1; //Order 1 by default.
    add();
};

但是没有成功

Answer 1

试试这个方法:

item.onchange = function() {
        price.innerHTML = "$" + this.value;
        cost.innerHTML = "$" + (-this[this.selectedIndex].getAttribute('value2'));
        qty.value = 1; //Order 1 by default.
        add();
    };

然后以这种方式修改add():

var cost = (parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')) )?parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')):0;
var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;

sum += (price - cost) * qty;

您需要做的是使用getAttribute()获取value2并使用.selectedIndex属性来标识下拉控件中选定的选项。

或者至少这是我的解释。

正在运行 here