Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
How to compare values inside else if

I got a script in which if you click on an apple, grape, or banana, it will alert you the price, with the tax from the state that you selected. But, for some reason I keep on getting NaN. It started coming NaN when I added the script that gets the percent from the number.

var apple = 2
var bananna = 3
var grapes = 4
var NJ = 6.625
var NY = 8.225
var PA = 6
var FL = 8
var e = document.getElementById("state").value

var oi;
if (e == NJ) {
  oi = NJ
} else if (e == NY) {
  oi == NY
} else if (e == PA) {
  oi == PA
} else {
  oi == FL
}

function myFunction() {
  var percent = (oi / 100) * grapes;
  alert(percent)
}

function yFunction() {
  var percent = (oi / 100) * apple;
  alert(percent)
}

function mFunction() {
  var percent = (oi / 100) * bananna;
  alert(percent)
}
<h2>Enter state of residence.</h2>
<select name="state" class="state" id="state">
  <option value="NJ">NJ</option>
  <option value="NY">NY</option>
  <option value="PA">PA</option>
  <option value="FL">FL</option>
</select>

<h2> Click on what you wish to buy.</h2>
<button type="button" id="i"> <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" onclick = "yFunction()" height ="80" width="100" /></button>
<button type="button" id="o"> <img src="https://th-thumbnailer.cdn-si-edu.com/xK6NAJHiv_51fzn5sDiQt0eD5Is=/fit-in/1600x0/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/d5/24/d5243019-e0fc-4b3c-8cdb-48e22f38bff2/istock-183380744.jpg" onclick = "mFunction()" height ="80" width="100" /></button>
<button type="button" id="h"> <img src="https://www.meijer.com/content/dam/meijer/product/0000/00/0004/02/0000000004022_2_A1C1_1200.png" onclick = "myFunction()" height ="80" width="100" /></button><br>

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

  • Use Strings not variable names when comparing the value
  • Use the Assignment operator when doing oi = NY etc, just like you did for oi = NJ
if (e == NJ) {         // should be a String: "NJ"
  oi = NJ              // (this one is correct)
} else if (e == NY) {  // should be a String: "NY"
  oi == NY             // should use assignment operator = not ==
// etc...
  • You should get the Select box value on click, not beforehand.
  • Don't use inline on* attributes. JS should be in one place only and that's its respective tag or file. Use Element.addEventListener() instead.
  • Don't copy/paste functions. That's not the meaning of programming. Detect instead the similarities and create a single reusable function.
  • Store your Data into objects.
  • Use HTML data-* attribute on your buttons to define the item target property. use JS's Element.dataset to than retrieve the stored value.

Remake suggestion:

const oi = {
  NJ: 6.625,
  NY: 8.225,
  PA: 6,
  FL: 8
};

const prices = {
  apple: 2,
  banana: 3,
  grape: 4
};

const calc = (item) => {
  const state = document.querySelector("#state").value;
  const result = oi[state] / 100 * prices[item];
  alert(result);
};

document.querySelectorAll("[data-item]").forEach(el => {
  el.addEventListener("click", () => calc(el.dataset.item));
});
<select id="state">
  <option value="NJ">NJ</option>
  <option value="NY">NY</option>
  <option value="PA">PA</option>
  <option value="FL">FL</option>
</select>
<h2> Click on what you wish to buy.</h2>
<button type="button" data-item="apple">apple</button>
<button type="button" data-item="banana">banana</button>
<button type="button" data-item="grape">grape</button>

Disclaimer: I have no clue what you're actually calculating, but there you go.

about 4 years ago · Juan Pablo Isaza Report

0

The state value is never set in your codes, so oi is never set also. Here are modified codes. Your codes can be optimized/simplified. For example, you don't need three functions to calculate price (btw your calculation is incorrect; it only calculated the tax).

var apple = 2
var bananna = 3
var grapes = 4
var NJ = 6.625
var NY = 8.225
var PA = 6
var FL = 8
// var e = document.getElementById("state").value
var e = ''
var oi = NJ  // initial state

function state(o)
{
   if(o.value == 'NJ') {
      oi = NJ
   } else if(o.value == 'NY') {
      oi = NY
   } else if(o.value == 'PA') {
      oi = PA
   } else {
      oi = FL
   }
}
function myFunction() {
  var percent = (oi / 100) * grapes;
  alert(percent);
}

function yFunction() {
  var percent = (oi / 100) * apple;
  alert(percent)
}

function mFunction() {
  var percent = (oi / 100) * bananna;
  alert(percent)
}


<h2>Enter state of residence.</h2>
<select name="state" class="state" id="state" onChange="state(this);">
  <option value="NJ">NJ</option>
  <option value="NY">NY</option>
  <option value="PA">PA</option>
  <option value="FL">FL</option>
</select>

<h2> Click on what you wish to buy.</h2>
<button type="button" id="i"> <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" onclick = "yFunction()" height ="80" width="100" /></button>
<button type="button" id="o"> <img src="https://th-thumbnailer.cdn-si-edu.com/xK6NAJHiv_51fzn5sDiQt0eD5Is=/fit-in/1600x0/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/d5/24/d5243019-e0fc-4b3c-8cdb-48e22f38bff2/istock-183380744.jpg" onclick = "mFunction()" height ="80" width="100" /></button>
<button type="button" id="h"> <img src="https://www.meijer.com/content/dam/meijer/product/0000/00/0004/02/0000000004022_2_A1C1_1200.png" onclick = "myFunction()" height ="80" width="100" /></button><br>


about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!