Question

我还在学习js，再次陷入困境，我试图在一个innerHTML中添加2个下拉菜单值并将它们合计。

我试图从Phones / Devices（item）获取value2，然后从New Activation（item1）下拉列表中添加值，并将它们总计在Commission innerHTML中。在js中，佣金线是成本。

我尝试在成本行中添加元素，但这不起作用。还尝试将项目本身添加到成本行中。

这里是html和js

    <table width="50%" border="0">
  <tr>
    <td width="20%"><div align="center">item</div></td>
    <td width="20%"><div align="center">New Activation</div></td>
    <td width="20%"><div align="center">Commission</div></td>
    <td width="20%"><div align="center">Price</div></td>
    <td width="20%"><div align="center">MEID</div></td>
    <td width="20%"><div align="center">Number</div></td>
  </tr>





    <td><div class="styled" align="center">
            <select name="item" id="item">
            <option value="">Phones/Devices</option>
                <option value="">-----APPLE-----</option>
              <option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
              <option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
              <option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
              <option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
              <option value="300.00" value2="20.00">iPhone 4S 8GB</option>
              <option value="325.00" value2="20.00">iPhone 4S 16GB</option>
              <option value="350.00" value2="20.00">iPhone 4S 32GB</option>
              <option value="375.00" value2="20.00">iPhone 4S 64GB</option>
              <option value="400.00" value2="20.00">iPhone 5</option>
                <option value="500.00" value2="30.00">iPhone 5C</option>
                <option value="625.00" value2="30.00">iPhone 5S</option>
                <option value="">-----BlackBerry-----</option>
                <option value="75.00" value2="5.00">Curve</option>
                <option value="100.00" value2="5.00">Bold</option>
                <option value="225.00" value2="10.00">Q10</option>
                <option value="250.00" value2="10.00">Z10</option>
              <option value="">-----HTC-----</option>
                <option value="100.00" value2="5.00">Incredible</option>
                <option value="150.00" value2="5.00">Incredible 2</option>
                <option value="150.00" value2="5.00">Evo</option>
                <option value="125.00" value2="5.00">Evo Shift</option>
                <option value="200.00" value2="10.00">Evo LTE</option>
                <option value="175.00" value2="10.00">Rhyme</option>
                <option value="225.00" value2="10.00">Rezound</option>
                <option value="400.00" value2="20.00">DNA</option>
              <option value="450.00" value2="20.00">HTC One</option>
              <option value="600.00" value2="20.00">HTC One M8</option>
                <option value="">-----Huawei-----</option>
                <option value="100.00" value2="5.00">Ascend Y</option>
                <option value="150.00" value2="5.00">Ascend Plus</option>
                <option value="">-----LG-----</option>
                <option value="50.00" value2="5.00">Optimus Dynamic</option>
                <option value="100.00" value2="5.00">Optimus Zip</option>
                <option value="75.00" value2="5.00">Vortex</option>
                <option value="100.00" value2="5.00">Enlighten</option>
                <option value="250.00" value2="10.00">Lucid</option>
                <option value="200.00" value2="10.00">Revolution</option>
                <option value="250.00" value2="10.00">Spectrum</option>
                <option value="450.00" value2="20.00">G2</option>
                <option value="">-----Motorola-----</option>
                <option value="100.00" value2="5.00">Droid 2</option>
                <option value="175.00" value2="5.00">Droid 3</option>
                <option value="200.00" value2="10.00">Droid 4</option>
                <option value="225.00" value2="10.00">Bionic</option>
                <option value="250.00" value2="10.00">Razr</option>
                <option value="275.00" value2="10.00">Razr Maxx</option>
                <option value="300.00" value2="10.00">Razr HD</option>
                <option value="350.00" value2="20.00">Moto X</option>
                <option value="300.00" value2="20.00">Moto G</option>
                <option value="350.00" value2="20.00">Droid Ultra</option>
                <option value="">-----SAMSUNG-----</option>
                <option value="200.00" value2="10.00">Galaxy Stellar</option>
                <option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
                <option value="225.00" value2="10.00">Galaxy Nexus</option>
                <option value="225.00" value2="5.00">Epic 4G</option>
                <option value="250.00" value2="10.00">Galaxy S2</option>
              <option value="300.00" value2="20.00">Galaxy S3</option>
              <option value="450.00" value2="20.00">Galaxy S4</option>
              <option value="650.00" value2="30.00">Galaxy S5</option>  
              <option value="450.00" value2="20.00">Galaxy Note ll</option>
              <option value="600.00" value2="30.00">Galaxy Note lll</option>
            </select>
          </div></td>
           <td><div class="styled" align="center">
            <select name="item1" id="item1">
            <option value="">New Activation?</option>
              <option value="5.00">YES</option>
              <option value="0.00">NO</option>

            </select>
          </div></td>
         <span style="visibility:hidden;display:none;" id="phones"></span>
            <td><div align="center">
            <span id="cost"></span>
          </div></td>
          <td><div align="center">
           <span id="price"></span>
          </div></td>

            <td>
                <div align="center">

                  <input name="meid" type="Text" id="meid"/>
                </div>
            </td>


            <td>
                <div align="center">
                    <input name="number" type="Text" id="number"/>
                </div>
            </td>
    </tr>

和javascript

var item = document.getElementById('item');
var item1 = document.getElementById('item1');

item.onchange = function() {
        price.innerHTML = "$" + this.value;
        cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
        phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));


    };

和here是一个jsfiddle

在搞乱这个修改后的脚本后，我认为这是行不通的问题

var commission = +phoneEl.getAttribute("value2");

我无法弄清楚出了什么问题。 http://jsfiddle.net/3zf8G/4/

Answer 1

下面：

var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');

function updatePrice() {
    var phonePrice = +phoneEl.value;

    price.innerHTML = "$"+phonePrice;
}

function updateCommission() {
    var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
        activationPrice = +activationEl.value,
        totalCommission = commission + activationPrice;

    cost.innerHTML = "$" + totalCommission;
}

phoneEl.onchange = function() {
    updatePrice();
    updateCommission();
};

activationEl.onchange = function() {
    updatePrice();
    updateCommission();
};

小提琴：http://jsfiddle.net/3zf8G/5/

您未将value和value2属性中存储的值转换为数字;您可以通过在+前面将字符串解析为数字。并且您没有注意到激活下拉列表的更改。此外，未定义变量phone。为了清楚起见，我更改了变量名称。

在一个innerHTML中添加2个值并将它们相加

1 个答案: