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.
JavaScript
x
113
113
1
<!DOCTYPE HTML>2
<html>3
<head>4
<title>Shipper Calculator</title>5
<link rel="stylesheet" href="Stylesheet.css">6
<script src="JavaScript.js" defer></script>7
</head>8
9
<body>10
<header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>11
<div class="Flex 1">12
<div class="CourierMenu">13
<select id="Courier">14
<option disabled="disabled" selected="selected">Courier</option>15
<option id="Marken">Marken</option>16
<option id="WorldCourier">World Courier</option>17
<option id="Quickstat">Quickstat</option>18
<option id="DHL">DHL</option>19
</select>20
<select id="Temperature">21
<option disabled="disabled" selected="selected">Temperature</option>22
<option id="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>23
<option id="ControlleFrozen">-25ºC to -15º</option>24
<option id="DryIce">Dry Ice</option>25
<option id="Ambient">Ambient</option>26
</select>27
</div>28
29
<div class="DimsInput">30
<input id="Kits" placeholder="Kits (Quantity)">31
<input id="Length" placeholder="Length (mm)">32
<input id="Width" placeholder="Width (mm)">33
<input id="Height" placeholder="Height (mm)">34
</div>35
<input id="submit" type="submit">36
</div>37
<div class="result">38
<p class="req" >Shipper Required:</p>39
<p class="req" id="finalresult"></p>40
</div>41
42
</body>43
<footer>44
</footer>45
46
</html>47
48
//Marken Shippers - Inner Dimensions49
var marken12L, marken28L, marken56L, marken96L;50
marken12L = (10 * 10 * 10);51
marken28L = (20 * 20 * 20);52
marken56L = (30 * 30 * 30);53
marken96L = (40 * 40 * 40);54
55
//World Courier Shippers - Inner Dimensions56
var gtc12L, gtc28L, gtc56L, gtc96L, vipXL, vipCase, vipTainer, cocoon850;57
gtc12L = (10 * 10 * 10);58
gtc28L = (20 * 20 * 20);59
gtc56L = (30 * 30 * 30);60
gtc96L = (40 * 40 * 40);61
vipXL = (10 * 10 * 10);62
vipCase = (20 * 20 * 20);63
vipTainer = (30 * 30 * 30);64
cocoon850 = (40 * 40 * 40);65
66
//Quickstat Shippers - Inner Dimensions67
var credo12L, credo28L, credo56L, credo96L, halfStack, fullStack;68
credo12L = (10 * 10 * 10);69
credo28L = (20 * 20 * 20);70
credo56L = (30 * 30 * 30);71
credo96L = (40 * 40 * 40);72
halfStack = (10 * 10 * 10);73
fullStack = (20 * 20 * 20);74
75
76
77
document.getElementById("submit").onclick = markenResult;78
79
function marken() {80
var selCourierMarken = document.getElementById("Marken").text;81
var selTempMarken = document.getElementById("ControlledAmbient_Refrigerated").text;82
sel.addEventListener("change", markenResult);83
84
var kits, l, w, h;85
kits = document.getElementById("Kits").value;86
l = document.getElementById("Length").value;87
w = document.getElementById("Width").value;88
h = document.getElementById("Height").value;89
90
var cbm = (l * w * h)*kits;91
92
if (selCourierMarken == "Marken" && selTempMarken == "ControlledAmbient_Refrigerated") return;93
94
95
96
if (cbm <= marken12L) {97
var result = "12L Credo";98
}99
else if (cbm <= marken28L) {100
var result = "28L Credo";101
}102
else if (cbm <= marken56L) {103
var result = "56L Credo";104
}105
else if (cbm <= marken96L) {106
var result = "96L Credo";107
}108
else {109
alert("PALLET");110
}111
document.getElementById("finalresult").innerHTML = result;112
}113
Advertisement
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.