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

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

CodePudding user response：

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

CodePudding user response：

You should avoid working with ids. 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  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" >
          </div>
        </td>
        <td>
          <div><input type="number" name="qtyItem1" size="20" /></div>
        <td>
          <div><input type="button"></div>
        </td>
        </td>
        <td>
          <div><input type="text" name="sum1" ></div>
        </td>
      </tr>
<tr>
<th><select  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" >
          </div>
        </td>
        <td>
          <div><input type="number" name="qty2" size="20" /></div>
        <td>
          <div><input type="button"></div>
        </td>
        </td>
        <td>
          <div><input type="text" name="sum2" ></div>
        </td>
      </tr>
</table>

CodePudding user response：

    <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>