How to write function selection values for total order. From selection have a default values and whe-CodePudding

<tr id="">
  <th>
    <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>
      <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="priceitem1"></div>
  </td>
  <td>
    <div > Quantity :<input type="text" name="qtyItem1"></div>
    <td>
      <div ><input type="button" value="Sum" onclick="processItem1()"></div>
    </td>
  </td>
  <td>
    <div ><input type="text" name="sumItem1"></div>
  </td>
  <td>
    <i ></i>
  </td>
</tr>

I Have tried everything but it does not seem to be working on selection value, when i click on sum button there nothing happen and im stuck when its come to onclick button function. I am new to javascript, any help would be grateful. Thank you.

CodePudding user response：

Here is a simple implementation. You can further develop as you wish. Good luck!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <tr id="">
    <th><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>
        <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="priceitem1">
      </div>
    </td>
    <td>
      <div > Quantity :<input type="number" name="qtyItem1" id="qtyItem1" size="20" /></div>
    <td>
      <div><input type="button" value="Sum" onclick="getSum()"></div>
    </td>
    </td>
    <td>
      <div><input type="text" name="sumItem1" id="sumItem1"></div>
    </td>
    <td>
      <i ></i>
    </td>
  </tr>
  <script>
    let option;
    function myFunction() {
      let selection = document.getElementById("selection");
      option = selection.options[selection.selectedIndex].value;
      document.getElementById("priceitem1").value = option;
    }
    function getSum() {
      let quantity = Number(document.getElementById("qtyItem1").value);
      let sum = quantity * Number(option);
      document.getElementById("sumItem1").value = sum;
    }
  </script>
</body>

</html>