I’ve been trying to build up a website that involves dropdown lists, and following are the html code and js code
`<!DOCTYPE html>
<body id = "bdprod">
<div class = "combo">
<select id = 'sizes' onchange="enableGauge()">
<option selected >select the size</option>
<option id = "s12" >12 x 12</option>
<option id = "s14">14 x 14</option>
<option id = "s16">16 x 16</option>
<option id = "s18">18 x 18</option>
<option id = "s20">20 x 20</option>
<option id = "s24">24 x 24</option>
</select>
<select id = 'gauge' disabled onchange="enableGauge()">
<option selected >select the gauge</option>
<option id = "g300">300 Gauge</option>
<option id = "g350">350 Gauge</option>
</select>
</div>
Price: <label id = "priceLabel">pricedisplay</label>
<script src = "cmgrowbags.js" type = "text/javascript"></script>
</body>
</html>
JS code
const prices = {
"12×12 , 350 gauge": 20,
"14×14 , 300 gauge": 24,
"14×14 , 350 gauge": 26,
"16×16 , 300 gauge": 27,
"16×16 , 350 gauge": 30,
"18×18 , 300 gauge": 34,
"18×18 , 350 gauge": 36,
"20×20 , 300 gauge": 42,
"20×20 , 350 gauge": 46,
"24×24 , 350 gauge": 62
};
function enableGauge() {
const sizesSelect = document.getElementById("sizes");
const gaugeSelect = document.getElementById("gauge");
const priceLabel = document.getElementById("priceLabel");
gaugeSelect.disabled = (sizesSelect.value === "select the size");
priceLabel.innerHTML = ""; // Clear the price label
if (sizesSelect.value !== "select the size" && gaugeSelect.value !== "select the gauge") {
const size = sizesSelect.options[sizesSelect.selectedIndex].text;
const gauge = gaugeSelect.options[gaugeSelect.selectedIndex].text;
const key = `${size} , ${gauge}`;
alert(key); //upto this part it works
let price = prices[key];
priceLabel.innerHTML = `Price: ${price}`;
}
}
upto the “alert(key)” statement it works but then the price variable doesn’t work and it just displays the price is undefined. help me pls