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

实现选择项目的总成本

1 个答案: