Using HTML and Javascript to make a concrete supplies calculator – Takes a value of both ____m3 and a select option (mpa) to give a total price

This is my first time asking a question on Stack Overflow so apologies if I get something wrong. I am currently building a web calculator for a concrete company. Here are the details of the inputs: There is a form with the following inputs: Input 1: Cubic Meters (m3) Input 2: Strength Input 1 takes a value between 0.1 m3 and 3.2 m3. 3.2 m3 is the maximum weight that their trucks can carry. Input 2 is a select with three options = 20MPa, 25MPa, 32MPa. The difficult part is here: Depending on the strength chosen, there is a separate pricing table. For example: 0.1 m3 costs: 20MPa = $230 25MPa = $250 32MPa = $280 The prices for each list increment at different amounts per 0.1, and at different rates per table. I’ve written some if/else functions for each strength table, which checks the value range and returns the corresponding price. I have started another function to calculate the values but I can’t work out how to integrate the if else function into this calculation. I need the calculator to read the m3 (e.g. 1.4) and read the chosen option for the strength, to then find the right price in that table for that m3 amount. Sorry if my explanation isn’t well written, I’m a bit lost and would appreciate some help.

I tried to define the options by creating variables with the value of the chosen select option. I then tried to insert the result of the m3 amount + the strength variable into the calculator result box. My next step is to somehow insert my if else functions into this calculator function but I can’t work out where to put it and what syntax to use. I’ve included my HTML for the calculator, my JavaScript for the calculator function and the if else function for the price list. Gratitude for helping a Web Dev student 🙂

      <!-- My web calculator HTML -->
      <section class="price-calculator">
        <h1>Price Calculator - 20 MPa</h1>
        <p>Cubic Meters (m3)</p>
        <input id="cubic-amount" placeholder="3" /><br />
        <p>Strength</p>
        <select name="mpa" id="mpa">
          <option id="20" value="">20 (MPa)</option>
          <option id="25" value="25">25 (MPa)</option>
          <option id="32" value="32">32 (MPa)</option>
        </select>
        <button onclick="calculatePrice()">calculate</button>
        <p>Price ($AUD)</p>
        <div id="price-result"></div>
      </section>

// Price calculator

function calculatePrice() {
  let amount = document.getElementById("cubic-amount").value.replace(",", ".");
  amount = amount.replace(/,/g, ".");
  amount = parseFloat(amount);

  let mpa20 = document.getElementById("20").value.replace(",", ".");
  mpa20 = mpa20.replace(/,/g, ".");
  mpa20 = parseFloat(mpa20);

  let mpa25 = document.getElementById("25").value.replace(",", ".");
  mpa25 = mpa25.replace(/,/g, ".");
  mpa25 = parseFloat(mpa25);

  let mpa32 = document.getElementById("32").value.replace(",", ".");
  mpa32 = mpa32.replace(/,/g, ".");
  mpa32 = parseFloat(mpa32);

  let price = amount + mpa20;
  document.getElementById("price-result").innerHTML = price.toFixed(2);
}

// Table for m3 ranges - 20 MPa Strength

function ifElse20(val) {
  let answer = "";
  // Start of if else chain
  // 0.1
  if (val >= 0.1 && val <= 0.19) {
    return "$230";
    // 0.2
  } else if (val >= 0.2 && val <= 0.29) {
    return "$250";
    // 0.3
  } else if (val >= 0.3 && val <= 0.39) {
    return "$270";
    // 0.4
  } else if (val >= 0.4 && val <= 0.49) {
    return "$290";
    // 0.5
  } else if (val >= 0.5 && val <= 0.59) {
    return "$310";
    // 0.6
  } else if (val >= 0.6 && val <= 0.69) {
    return "$330";
    // 0.7
  } else if (val >= 0.7 && val <= 0.79) {
    return "$350";
    // 0.8
  } else if (val >= 0.8 && val <= 0.89) {
    return "$380";
    // 0.9
  } else if (val >= 0.9 && val <= 0.99) {
    return "$410";
    // 1.0
  } else if (val >= 1.0 && val <= 1.09) {
    return "$430";
    // 1.1
  } else if (val >= 1.1 && val <= 1.19) {
    return "$470";
    // 1.2
  } else if (val >= 1.2 && val <= 1.29) {
    return "$520";
    // 1.3
  } else if (val >= 1.3 && val <= 1.39) {
    return "$570";
    // 1.4
  } else if (val >= 1.4 && val <= 1.49) {
    return "$610";
    // 1.5
  } else if (val >= 1.5 && val <= 1.59) {
    return "$650";
    // 1.6
  } else if (val >= 1.6 && val <= 1.69) {
    return "$690";
    // 1.7
  } else if (val >= 1.7 && val <= 1.79) {
    return "$740";
    // 1.8
  } else if (val >= 1.8 && val <= 1.89) {
    return "$780";
    // 1.9
  } else if (val >= 1.9 && val <= 1.99) {
    return "$820";
    // 2.0
  } else if (val >= 2.0 && val <= 2.09) {
    return "$860";
    // 2.1
  } else if (val >= 2.1 && val <= 2.19) {
    return "$900";
    // 2.2
  } else if (val >= 2.2 && val <= 2.29) {
    return "$940";
    // 2.3
  } else if (val >= 2.3 && val <= 2.39) {
    return "$980";
    // 2.4
  } else if (val >= 2.4 && val <= 2.49) {
    return "$1020";
    // 2.5
  } else if (val >= 2.5 && val <= 2.59) {
    return "$1060";
    // 2.6
  } else if (val >= 2.6 && val <= 2.69) {
    return "$1100";
    // 2.7
  } else if (val >= 2.7 && val <= 2.79) {
    return "$1150";
    // 2.8
  } else if (val >= 2.8 && val <= 2.89) {
    return "$1190";
    // 2.9
  } else if (val >= 2.9 && val <= 2.99) {
    return "$1240";
    // 3.0
  } else if (val >= 3.0 && val <= 3.09) {
    return "$1290";
    // 3.1
  } else if (val >= 3.1 && val <= 3.19) {
    return "$1330";
    // 3.2
  } else if (val >= 3.2 && val <= 3.29) {
    return "$1380";
    // End of chain
  }
  return answer;
}

Answer

maybe something like that…?

const
  f_priceCalculator = document.querySelector('#price-calculator')
, pricingArr = 
    [ { ref: 0.1, price:  230 }, { ref: 0.2, price:  250 }, { ref: 0.3, price:  270 }, { ref: 0.4, price:  290 }
    , { ref: 0.5, price:  310 }, { ref: 0.6, price:  330 }, { ref: 0.7, price:  350 }, { ref: 0.8, price:  380 }
    , { ref: 0.9, price:  410 }, { ref: 1.0, price:  430 }, { ref: 1.1, price:  470 }, { ref: 1.2, price:  520 }
    , { ref: 1.3, price:  570 }, { ref: 1.4, price:  610 }, { ref: 1.5, price:  650 }, { ref: 1.6, price:  690 }
    , { ref: 1.7, price:  740 }, { ref: 1.8, price:  780 }, { ref: 1.9, price:  820 }, { ref: 2.0, price:  860 }
    , { ref: 2.1, price:  900 }, { ref: 2.2, price:  940 }, { ref: 2.3, price:  980 }, { ref: 2.4, price: 1020 }
    , { ref: 2.5, price: 1060 }, { ref: 2.6, price: 1100 }, { ref: 2.7, price: 1150 }, { ref: 2.8, price: 1190 }
    , { ref: 2.9, price: 1240 }, { ref: 3.0, price: 1290 }, { ref: 3.1, price: 1330 }, { ref: 3.2, price: 1380 }
    ];

f_priceCalculator.onsubmit = e =>  // same as <button type="submit">  clicked
  {
  e.preventDefault();  // disable form submit (== page reload) 

  let
    cAmountRef = ((f_priceCalculator['cubic-amount'].valueAsNumber * 10) | 0) / 10
  , prx        = pricingArr.find( x => x.ref === cAmountRef )
    ;
  f_priceCalculator['price-result'].value = (prx.price + parseInt(f_priceCalculator.mpa.value)).toFixed(2)
  }
f_priceCalculator.oninput =_=>  // on any change...
  {
  f_priceCalculator['price-result'].value = ''
  }

body {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 16px;
  }
form {
  width   : fit-content;
  border  : 1px solid steelblue;
  margin  : 1rem;
  padding : .8rem 1rem;
  }
form h2 {
  margin  : .2rem 0 2rem 0;
  }
input[type=number] {
  font-size  : 1.2rem;
  width      : 7rem;
  text-align : center;
  }
label {
  display : block;
  margin  : .2rem 0 .8rem 0;
  }
button { 
  margin         : 1em 0;
  padding        : .3em 3em;
  }
output[name="price-result"] {
  float : right;
  }
output[name="price-result"]::before {
  content : '$ '
  }

<form id="price-calculator">
  <h2> Price Calculator - 20 MPa </h2>
  <label> Cubic Meters (m3) :
    <input name="cubic-amount" type="number" min="0.10" value="3.00" max="3.29" step="0.01" >
  </label>
<fieldset>
  <legend>Strength</legend>
  <label> 
    <input  name="mpa" type="radio" value="20" checked >
    20 (MPa)
  </label>
  <label> 
    <input  name="mpa" type="radio" value="25"  >
    25 (MPa)
  </label>
  <label> 
    <input  name="mpa" type="radio" value="32"  >
    32 (MPa)
  </label>
  </fieldset>
  <button type="submit"> Calculate </button>
  <fieldset>
    <legend>Price ($AUD)</legend>
    <output name="price-result"> </output>
  </fieldset>
</form>