Is there a way to execute a Javascript function when 2 separate HTML and elements are chosen by the user?

I’m new to Javascript and am struggling to execute a function when two separate elements are selected. I’m trying to get a final result based on the options selected. I work in a logistics company and am just trying out something to practice coding and help in my job. Please see my code below, hope it makes some sense on what i’m trying to achieve (finding out what shipping container is required based on the dimensions of a ‘Kit’). I want to keep the Javascript in a separate file so please bare this in mind when replying.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shipper Calculator</title>
    <link rel="stylesheet" href="Stylesheet.css">
    <script src="JavaScript.js" defer></script>
  </head>

<body>
  <header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>
  <div class="Flex 1">
    <div class="CourierMenu">
      <select id="Courier">
        <option disabled="disabled" selected="selected">Courier</option>
        <option id="Marken">Marken</option>
        <option id="WorldCourier">World Courier</option>
        <option id="Quickstat">Quickstat</option>
        <option id="DHL">DHL</option>
      </select>
    <select id="Temperature">
      <option disabled="disabled" selected="selected">Temperature</option>
      <option id="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>
      <option id="ControlleFrozen">-25ºC to -15º</option>
      <option id="DryIce">Dry Ice</option>
      <option id="Ambient">Ambient</option>
    </select>
  </div>

    <div class="DimsInput">
      <input id="Kits" placeholder="Kits (Quantity)">
      <input id="Length" placeholder="Length (mm)">
      <input id="Width" placeholder="Width (mm)">
      <input id="Height" placeholder="Height (mm)">
    </div>
    <input id="submit" type="submit">
  </div>
  <div class="result">
    <p class="req" >Shipper Required:</p>
    <p class="req" id="finalresult"></p>
  </div>

</body>
  <footer>
  </footer>

</html>

//Marken Shippers - Inner Dimensions
  var marken12L, marken28L, marken56L, marken96L;
    marken12L = (10 * 10 * 10);
    marken28L = (20 * 20 * 20);
    marken56L = (30 * 30 * 30);
    marken96L = (40 * 40 * 40);

  //World Courier Shippers - Inner Dimensions
  var gtc12L, gtc28L, gtc56L, gtc96L, vipXL, vipCase, vipTainer, cocoon850;
    gtc12L = (10 * 10 * 10);
    gtc28L = (20 * 20 * 20);
    gtc56L = (30 * 30 * 30);
    gtc96L = (40 * 40 * 40);
    vipXL = (10 * 10 * 10);
    vipCase = (20 * 20 * 20);
    vipTainer = (30 * 30 * 30);
    cocoon850 = (40 * 40 * 40);

  //Quickstat Shippers - Inner Dimensions
  var credo12L, credo28L, credo56L, credo96L, halfStack, fullStack;
    credo12L = (10 * 10 * 10);
    credo28L = (20 * 20 * 20);
    credo56L = (30 * 30 * 30);
    credo96L = (40 * 40 * 40);
    halfStack = (10 * 10 * 10);
    fullStack = (20 * 20 * 20);



document.getElementById("submit").onclick = markenResult;

function marken() {
  var selCourierMarken = document.getElementById("Marken").text;
  var selTempMarken = document.getElementById("ControlledAmbient_Refrigerated").text;
  sel.addEventListener("change", markenResult);

  var kits, l, w, h;
    kits = document.getElementById("Kits").value;
    l = document.getElementById("Length").value;
    w = document.getElementById("Width").value;
    h = document.getElementById("Height").value;

  var cbm = (l * w * h)*kits;

  if (selCourierMarken == "Marken" && selTempMarken == "ControlledAmbient_Refrigerated") return;



  if (cbm <= marken12L) {
   var result = "12L Credo";
  }
  else if (cbm <= marken28L) {
  var result = "28L Credo";
}
  else if (cbm <= marken56L) {
    var result = "56L Credo";
}
  else if (cbm <= marken96L) {
    var result = "96L Credo";
}
  else {
    alert("PALLET");
  }
  document.getElementById("finalresult").innerHTML = result;
}

Answer

You could add event listeners to both selects. In both you point to the same function. In that function, check if both selects have valid values. If so, execute the code.

Advertisement

Answer