I'm getting alerted NaN in my script, but I don't know why-CodePudding

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"  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>

CodePudding user response：

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.

CodePudding user response：

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"  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>