How can I calculate an equation based on an amount input and reason selected from dropdown?

Question

`I'm trying to calculate the cost of a property deed change based on the reason for the change and the user-inputted loan amount. With the code so far, I'm able to calculate and send an alert for reasons 3 and 4, but the other reasons aren't outputting the appropriate alert/cost. Some of the code is probably redundant, but this is one of my first projects so please cut me some slack.

HTML

<select id="menu" required>
        <option value="r0">Select</option>
        <option value="r1" id="reason" class="reason">1. Corrective Deed</option>
        <option value="r2" id="reason" class="reason">2. Deed Pursuant to a Dissolution</option>
        <option value="r3" id="reason" class="reason">3. Deed to Remove Spouse from Primary Residence Without Dissolution</option>
        <option value="r4" id="reason" class="reason">4. Deed to Add a Co-borrower Who is Not Currently on Title. The Co-borrower has to be on the loan and this has to be a Primary Residence.</option>
        <option value="r5" id="reason" class="reason">5. Deed to Add Spouse Even if They Are Not on the Loan</option>
        <option value="r6" id="reason" class="reason">6. Deed to Remove or Add an Owner on Investment Property or 2nd Home (Only if Requirement of Our Loan)</option>
        <option value="r7" id="reason" class="reason">7. Deeds to Take Property Out of a Trust</option>
        <option value="r8" id="reason" class="reason">8. Deeds to Take Property Out of a Life Estate</option>
        <option value="r9" id="reason" class="reason">9. Deeds Where We are Transferring Full Ownership to Our Borrowers*</option>
</select>

JavaScript

function calculateCost() {
let r = document.getElementsByClassName("reason").value;
let a = document.getElementById("amount").value;
    
if (r === 'r3' || 'r4') {
    cost34 = ((a / 2) * 0.0070);
} else if (r === 'r5') {
    cost = 0.0070;
} else if (r === 'r6' || 'r8' || 'r9') {
    cost = (a  * 0.0070); 
} else {
    alert("N/A");
}
alert("Total Cost of Deed Change: $" + cost);

};

score 1 · Answer 1 · answered May 01 '23 at 21:35

There are a few things to point out here.

First, ID's are a unique identifier and cannot be attributed to more than one element, so you should not have id="reason" on each of your options.

Second, to get the selected option of the select, you want to look at the value of the select and not of the option(s). Ex: let r = document.getElementById("menu").value; This will result in r = 'r1' if the first option is selected, for example. For more on using select's with JavaScript, see this question and its answers.

Third, writing if (r === 'r3 || 'r4') does not work to evaluate whether r is 'r3' or 'r4'. You need to include the r === on each value you want to check for, so: if (r === 'r3' || r === 'r4') would be the correct way to write this. See here for more.

Edit: Forgot to mention this, but using let to define variables creates "block-scoped" variables, which can only be used within that block. That is why I moved the let cost outside of the if blocks. Would probably be worth looking into the differences between var, let, and const for defining variables.

Here is a working example:

function calculateCost() {
let r = document.getElementById("menu").value;
let a = document.getElementById("amount").value;
let cost;
    
if (r === 'r3' || r === 'r4') {
    cost = ((a / 2) * 0.0070);
} else if (r === 'r5') {
    cost = 0.0070;
} else if (r === 'r6' || r === 'r8' || r === 'r9') {
    cost = (a  * 0.0070); 
} else {
    alert("N/A");
}

alert("Total Cost of Deed Change: $" + cost);

};

Amount: <input id="amount" type="number">
<select id="menu" required>
        <option value="r0">Select</option>
        <option value="r1" class="reason">1. Corrective Deed</option>
        <option value="r2" class="reason">2. Deed Pursuant to a Dissolution</option>
        <option value="r3" class="reason">3. Deed to Remove Spouse from Primary Residence Without Dissolution</option>
        <option value="r4" class="reason">4. Deed to Add a Co-borrower Who is Not Currently on Title. The Co-borrower has to be on the loan and this has to be a Primary Residence.</option>
        <option value="r5" class="reason">5. Deed to Add Spouse Even if They Are Not on the Loan</option>
        <option value="r6" class="reason">6. Deed to Remove or Add an Owner on Investment Property or 2nd Home (Only if Requirement of Our Loan)</option>
        <option value="r7" class="reason">7. Deeds to Take Property Out of a Trust</option>
        <option value="r8" class="reason">8. Deeds to Take Property Out of a Life Estate</option>
        <option value="r9" class="reason">9. Deeds Where We are Transferring Full Ownership to Our Borrowers*</option>
</select>

<button onclick="calculateCost();">
Calculate
</button>

score 0 · Answer 2 · answered May 01 '23 at 22:41

As a corollary to Ben's great answer a couple of observations:

A select may not be the best choice for input. The length of the text that you're labelling the options with is really too much for the select box to handle well on any screen let alone a mobile device (for example).

I would suggest moving to radio buttons. This would allow you to format the text for each option appropriately.
Since you're dealing with currency you may want to consider using Intl.NumberFormat to format your output. You can specify the locale, and the type of number you want it formatted to, and the browser will handle the output.

// Cache the elements
const amount = document.querySelector('#amount');
const calculate = document.querySelector('#calculate');
const output = document.querySelector('#output span');

// Add a listener to the button
calculate.addEventListener('click', calculateCost);

// Create a number format object
const formatNumber = new Intl.NumberFormat("en-US", {
  style: 'currency',
  currency: 'USD'
});

function calculateCost() {

  // Get the value from the checked radio, and the amount
  // parsing the amount as a floating point number
  const checkedSelector = 'input[name="reason"]:checked';
  const r = document.querySelector(checkedSelector).value;
  const a = parseFloat(amount.value);

  let cost;
  
  if (r === '3' || r === '4') cost = (a / 2) * 0.0070;
  if (r === '5') cost = 0.0070;
  if (r === '6' || r === '8' || r === '9') cost = a  * 0.0070; 

  // If the cost is a number format it as US dollars, and
  // add it to the "cost" element
  if (!isNaN(cost)) {
    output.textContent = formatNumber.format(cost);
  }

}

fieldset, #output, #calculate { margin-top: 1rem; }
section { display: flex; align-items: flex-start; }
section:not(:last-child) { margin-bottom: 0.5rem; }
label { margin-left: 0.5rem; }

<fieldset id="reasons">
  <legend>Options</legend>
  <section>
    <input id="r1" type="radio" name="reason" value="1" />
    <label for="r1">Corrective Deed.</label>
  </section>
  <section>
    <input id="r2" type="radio" name="reason" value="2" />
    <label for="r2">Deed Pursuant to a Dissolution.</label>
  </section>
  <section>
    <input id="r3" type="radio" name="reason" value="3" />
    <label for="r3">Deed to Remove Spouse from Primary Residence Without Dissolution.</label>
  </section>
  <section>
    <input id="r4" type="radio" name="reason" value="4" />
    <label for="r4">Deed to Add a Co-borrower Who is Not Currently on Title. The Co-borrower has to be on the loan and this has to be a Primary Residence.</label>
  </section>
  <section>
    <input id="r5" type="radio" name="reason" value="5" />
    <label for="r5">Deed to Add Spouse Even if They Are Not on the Loan.</label>
  </section>
  <section>
    <input id="r6" type="radio" name="reason" value="6" />
    <label id="r6">Deed to Remove or Add an Owner on Investment Property or 2nd Home (Only if Requirement of Our Loan).</label>
  </section>
  <section>
    <input id="r7" type="radio" name="reason" value="7" />
    <label for="r7">Deeds to Take Property Out of a Trust</label>
  </section>
  <section>
    <input id="r8" type="radio" name="reason" value="8" />
    <label id="r8">Deeds to Take Property Out of a Life Estate</label>
  </section>
  <section>
    <input id="r9" type="radio" name="reason" value="9" />
    <label for="r9">Deeds Where We are Transferring Full Ownership to Our Borrowers*.</label>
  </section>
</fieldset>

<label>
  Amount $
  <input type="text" id="amount" />
</label>

<button id="calculate">Calculate</button>

<div id="output">
  Cost: <span></span>
</div>

How can I calculate an equation based on an amount input and reason selected from dropdown?

2 Answers2