how to write JavaScript function for 3 selection option value, and get sum on click button

Question

I have write 3 selection box which, myFunction() myFunction2() and myFunction3. but only myfuntion() can run. not for other. this 3 selection list have the same values. i also change the variable in function but its not working for me. I really appreciate anyone who can helps me. I am new to JavaScript, any help would be grateful. Thank you.

 <tr id="">
<th><select id="selection2" onchange="myFunction2()">
                <option id="0" value="0">None</option>
                <option id="1" value="4.00">Women Suit</option>
                <option id="2" value="10.00">Dress</option>
                <option id="3" value="6.00">Regular Skirt</option>
                <option id="4" value="7.00">Skirt With Hook</option>
                <option id="5" value="8.00">Men's Suit 2Pc</option>
                <option id="6" value="9.00">Men's Suit 3Pc</option>
                <option id="7" value="15.00">Sweaters</option>
                <option id="8" value="25.00">Silk Shirt</option>
                <option id="9" value="12.00">Tie</option>
                <option id="10" value="13.00">Coat</option>
                <option id="11" value="14.00">Jacket</option>
                <option id="12" value="15.00">Swede</option>
              </select></th>
            <td>
              <div>
                <input type="text" name="price" id="priceitem2">
              </div>
            </td>
            <td>
              <div><input type="number" name="qtyItem2" id="qtyItem2" size="20" /></div>
            <td>
              <div><input type="button" value="Calc" onclick="processItem2()"></div>
            </td>
            </td>
            <td>
              <div><input type="text" name="sumItem2" id="sumItem2"></div>
            </td>
          </tr>

let option;
    function myFunction() {
      let selection = document.getElementById("selection");
      option = selection.options[selection.selectedIndex].value;
      document.getElementById("priceitem1").value = option;
    }
    function processItem1() {
      let quantity = Number(document.getElementById("qtyItem1").value);
      let sum = quantity * Number(option);
      document.getElementById("sumItem1").value = sum;
    }
    
    let option;
    function myFunction2() {
      let selection2 = document.getElementById("selection2");
      option = selection2.options[selection2.selectedIndex].value;
      document.getElementById("priceitem2").value = option;
    }
    function processItem2() {
      let quantity = Number(document.getElementById("qtyItem2").value);
      let sum = quantity * Number(option);
      document.getElementById("sumItem2").value = sum;
    }
    
    let option;
    function myFunction3() {
      let selection3 = document.getElementById("selection3");
      option = selection2.options[selection2.selectedIndex].value;
      document.getElementById("priceitem3").value = option;
    }
    function processItem2() {
      let quantity = Number(document.getElementById("qtyItem3").value);
      let sum = quantity * Number(option);
      document.getElementById("sumItem3").value = sum;
    }

Answer 1

You should avoid working with id s. This will make everything more scalable as you can see below. I am using a single function that addresses the concerned DOM elements in a relative way:

 const inps=document.querySelectorAll("select, input"); function action(ev){ const [typ,prc,qty,sum]= ev.target.closest("tr").querySelectorAll(".typ,.prc,.qty,.sum"); prc.value=typ.value; sum.value=prc.value*qty.value??0; } ["input","change"].forEach(ev=>inps.forEach(el=>el.addEventListener(ev,action)))

 input {width:50px}

 <table> <tr> <th><select class="typ" name="sel1"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dress</option> <option id="3" value="6.00">Regular Skirt</option> <option id="4" value="7.00">Skirt With Hook</option> <option id="5" value="8.00">Men's Suit 2Pc</option> <option id="6" value="9.00">Men's Suit 3Pc</option> <option id="7" value="15.00">Sweaters</option> <option id="8" value="25.00">Silk Shirt</option> <option id="9" value="12.00">Tie</option> <option id="10" value="13.00">Coat</option> <option id="11" value="14.00">Jacket</option> <option id="12" value="15.00">Swede</option> </select></th> <td> <div> <input type="text" name="price1" class="prc"> </div> </td> <td> <div><input type="number" name="qtyItem1" size="20" class="qty"/></div> <td> <div><input type="button"></div> </td> </td> <td> <div><input type="text" name="sum1" class="sum"></div> </td> </tr> <tr> <th><select class="typ" name="sel2"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dress</option> <option id="3" value="6.00">Regular Skirt</option> <option id="4" value="7.00">Skirt With Hook</option> <option id="5" value="8.00">Men's Suit 2Pc</option> <option id="6" value="9.00">Men's Suit 3Pc</option> <option id="7" value="15.00">Sweaters</option> <option id="8" value="25.00">Silk Shirt</option> <option id="9" value="12.00">Tie</option> <option id="10" value="13.00">Coat</option> <option id="11" value="14.00">Jacket</option> <option id="12" value="15.00">Swede</option> </select></th> <td> <div> <input type="text" name="price2" class="prc"> </div> </td> <td> <div><input type="number" name="qty2" size="20" class="qty"/></div> <td> <div><input type="button"></div> </td> </td> <td> <div><input type="text" name="sum2" class="sum"></div> </td> </tr> </table>

Answer 2

Actually your code is work fine. but like @Layhout said you declare too many option , and you just have to use one MyFunction and processItem1 . see the code below.

 let option; function myFunction() { let selection = document.getElementById("selection"); option = selection.options[selection.selectedIndex].value; document.getElementById("priceitem1").value = option; } function processItem1() { let quantity = Number(document.getElementById("qtyItem1").value); let sum = quantity * Number(option); document.getElementById("sumItem1").value = sum; } function myFunction2() { let selection2 = document.getElementById("selection2"); option = selection2.options[selection2.selectedIndex].value; document.getElementById("priceitem2").value = option; } function processItem2() { let quantity2 = Number(document.getElementById("qtyItem2").value); let sum2 = quantity2 * Number(option); document.getElementById("sumItem2").value = sum2; }

 <select id="selection" onchange="myFunction()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dress</option> <option id="3" value="6.00">Regular Skirt</option> </select><br> <input type="text" name="price" id="priceitem1"><br> <input type="number" name="qtyItem2" id="qtyItem1" size="20" /><br> <input type="button" value="Calc" onclick="processItem1()"><br> <input type="text" name="sumItem1" id="sumItem1"></div> <br>//////////////////////////////////////////////////////<br> <select id="selection2" onchange="myFunction2()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dress</option> <option id="3" value="6.00">Regular Skirt</option> </select><br> <input type="text" name="price" id="priceitem2"><br> <input type="number" name="qtyItem2" id="qtyItem2" size="20" /><br> <input type="button" value="Calc" onclick="processItem2()"><br> <input type="text" name="sumItem2" id="sumItem2"></div>

I hope this can help answer your question.

Edited: if u want the 3rd one, just do the same thing and make the different name or id

Answer 3

 <script> function calculateSum(){ var select1 = document.myForm.mySelect1.value; var select2 = document.myForm.mySelect2.value; var select3 = document.myForm.mySelect3.value; var sum = parseInt(select1) + parseInt(select2) + parseInt(select3); alert("Sum of three numbers is: " + sum); } </script>

 <html> <head> <title>JavaScript Sum</title> </head> <body> <form name="myForm"> <select name="mySelect1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> <select name="mySelect2"> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select name="mySelect3"> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> <input type="button" value="Calculate Sum" onclick="calculateSum()"> </form> </body> </html>