Mathematical Operation with addition and multiplication

Question

I have been trying to do this operation where quantity or Subtotal=value1+(value2*value3) but I can't figure out how to do the addition and multiplication in that order. I was trying it out on JS Bin and for some reason when I put 1 slab and BD variables it is 175 which is even below the value1 values. I would appreciate the help since I just started coding and with a bit of direct hints and help I will get better. Thank you.

I apologize for the confusing question. What I want is to create a form that will allow someone to know the price of a painted slab with a certain material. I found out I can do 2 slabs per hour, this is why value1 for numbers 1 and 2 = 300 an so on. Slab BD equals $75, slab BG equals $120. What I want is to calculate the price depending on number of slabs times the type of the slab. For example: If I want 1 slab of BD the math would be 300+(75*1) which is 300 for the hour of painting, 75 for the type and since I only use 1 of those types the multiplication at the end is 1. If I use 2 the math would be 300+(75*2), if I use three the math would be 600+(75*3). Feel free to ask if this is confusing. I appreciate any help.

Slabs
  <select input id="numberofslabs"><br>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select><br>
Materials
  <select input id="materials"><br>
    <option value="75">BD</option>
    <option value="120">BG</option>
    <option value="50">CC</option>
    <option value="200">MDF</option>
    <option value="800">A2</option>
    <option value="900">A3</option>
    <option value="1200">A4</option>
    <option value="1400">A5</option>
    <option value="1750">A6</option>
  </select>
<script type="text/javascript">
var selectElement = document.getElementById("numberofslabs");
    selectElement.addEventListener('change',myFunction);
    function myFunction() {
        var value1 = document.getElementById("numberofslabs").value;
        if(value1=="1")
        value=300;
        if(value1=="2")
        value=300
        if(value1=="3")
        value=600
        if(value1=="4")
        value=600
        if(value1=="5")
        value=900
        if(value1=="6")
        value=900
        if(value1=="7")
        value=1200
        if(value1=="8")
        value=1200
        if(value1=="9")
        value=1500
        if(value1=="10")
        value=1500
        if(value1=="11")
        value=1800
        if(value1=="12")
        value=1800
        if(value1=="13")
        value=2100
        if(value1=="14")
        value=2100
        if(value1=="15")
        value=2400
        if(value1=="16")
        value=2400
        if(value1=="17")
        value=2700
        if(value1=="18")
        value=2700
        if(value1=="19")
        value=3000
        if(value1=="20")
        value=3000
        var value2 =
document.getElementById("numberofslabs").value;
        var value3 =
document.getElementById("materials").value;
document.getElementById("quantity").value
        ='$'+value1 + +value2*value3;
}
</script>
<br>
Subtotal:<td><input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/></td>

I suppose you want `'$' + (parseFloat(value1) + parseFloat(value2) * parseFloat(value3))` — Iłya Bursov, Dec 30 '14 at 18:51
Thanks for the help Lashane, I tried your suggestion but it doesn't seem to work. The math it's doing is right but it's not taking the values it is supposed to. Instead of doing 300+(75*1) it does 1+(75*1). Also, the material(value3) is not changing. I appreciate the help :) — MadK3n, Dec 31 '14 at 02:49
Did you know that you can replace all those repeating `if` statements with simple arithmetic? `value = (+value1 + value1 % 2) * 150` — , Dec 31 '14 at 02:49
Thank you squint, I did not now that, I'll try it right now to make it cleaner. — MadK3n, Dec 31 '14 at 02:51

Cimbali · Answer 1 · 2015-01-01T19:36:23.150

You mixed up 'value' and 'value1' in your code, which is the main bug, and becomes more apparent once you use a mathematical formula instead of a long if statement.

Then as other improvements, separating the concatenation + (from '$'+ ...) and the mathematical + with parentheses makes for less confusion.

Finally, you weren't listening for changes on the materials.

document.getElementById("numberofslabs").addEventListener('change',myFunction);
document.getElementById("materials").addEventListener('change',myFunction);

function myFunction() {
    var value1 = document.getElementById("numberofslabs").value;
    value1 = (+value1 + value1 % 2) * 150;
    var value2 = document.getElementById("numberofslabs").value;
    var value3 = document.getElementById("materials").value;

    document.getElementById("quantity").value ='$'+(+value1 + value2 * value3);
}

Slabs
<select input id="numberofslabs"><br>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
  </select>
<br>
Subtotal:<input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/>

Thank you very much! Silly mistakes such as these occur at the start, I have been writing the code all around so I had no actual sequence to follow. Happy New Year! — MadK3n, Dec 31 '14 at 23:52

Mathematical Operation with addition and multiplication

1 Answers1