Есть ли способ выполнить функцию Javascript, когда пользователь выбирает 2 отдельных элемента HTML <select>и <option>? - PullRequest
Новая
       35

Есть ли способ выполнить функцию Javascript, когда пользователь выбирает 2 отдельных элемента HTML <select>и <option>?

0 голосов
/ 28 марта 2020

Я новичок в Javascript и пытаюсь выполнить функцию, когда выбраны два отдельных элемента. Я пытаюсь получить окончательный результат на основе выбранных параметров. Я работаю в логистической компании и просто пробую что-то, чтобы попрактиковаться в кодировании и помочь в моей работе. Пожалуйста, посмотрите мой код ниже, надеюсь, что он имеет какой-то смысл в том, чего я пытаюсь достичь (выяснить, какой транспортный контейнер требуется, основываясь на размерах «комплекта»). Я хочу сохранить Javascript в отдельном файле, поэтому при ответе имейте это в виду. 

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

1 Ответ

0 голосов
/ 28 марта 2020

Вы можете добавить прослушиватели событий для обоих селекторов. В обоих вы указываете на одну и ту же функцию. В этой функции проверьте, имеют ли оба выбранные допустимые значения. Если это так, выполните код.

...