add 2 values and total them in one innerHTML

Question

I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.

I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.

I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.

here is the html and 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>

and the 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'));


    };

and here is a jsfiddle

after messing around with this modified script i think that this is the line that is not working properly

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

I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/

Instead of innerHTML, you are likely better to set the value of readonly input elements. The multiple value attributes should be replaced with data- attributes. — RobG, Jun 25 '14 at 23:46
Use the data prefix for custom attributes. [reference](http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag) — JRulle, Jun 25 '14 at 23:47

SimpleJ · Answer 1 · 2014-06-26T15:37:23.147

2

Here:

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();
};

fiddle: http://jsfiddle.net/3zf8G/5/

You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.

edited Jun 26 '14 at 15:37

answered Jun 25 '14 at 23:52

SimpleJ

13,812
13
53
93

@RobG Thanks. I didn't know that. I'll update the code and fiddle. – SimpleJ Jun 26 '14 at 00:00
thanks for the input, but its not working quite right. When you select iPhone 4, the value, ($200) is supposed to populate into the price column, and value2($20) is supposed to populate into the Commission column, and then if you select YES for New Activation, it should add that value ($5) in the commission column, not the price column – gomoguy Jun 26 '14 at 00:19
ok, so I have updated it so it populates in the right areas, but I am still having a problem getting the value2 from the Phone/Devices drop down menu to populate in the commission column, all it shows is the activationPrice in that column, value2 is part of the commissions, so an iPhone 4 costs $200(value) and the commission is $20(value2), so when you select iPhone 4, commissions should read $20, price should read $200, then if you select YES for activation, Commission should read $25 and price stays the same. [HERE](http://jsfiddle.net/3zf8G/3/) is my updated jsfiddle – gomoguy Jun 26 '14 at 01:43
@gomoguy I've updated my answer. `value2` must be retrieved directly from the selection item using `phoneEl.options` since it's a data property on the `option` element. I also moved the activation price into the `updateCommission` function so it will be added to the commission rather than the phone price. – SimpleJ Jun 26 '14 at 15:40

add 2 values and total them in one innerHTML

1 Answers1