Obtuve un script en el que si hace clic en una manzana, uva o plátano, le avisará el precio, con el impuesto del estado que seleccionó. Pero, por alguna razón, sigo recibiendo NaN. Empezó a aparecer NaN cuando agregué el script que obtiene el porcentaje del número.
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>oi = NY , etc., tal como lo hizo para 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...on* . JS debe estar en un solo lugar y esa es su etiqueta o archivo respectivo. Utilice Element.addEventListener() en su lugar.data-* en sus botones para definir la propiedad de destino del elemento. use JS's Element.dataset para recuperar el valor almacenado.Sugerencia de remake:
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>Descargo de responsabilidad: no tengo idea de lo que realmente estás calculando, pero ahí lo tienes.
El valor del estado nunca se establece en sus códigos, por lo que oi nunca se establece también. Aquí hay códigos modificados. Sus códigos se pueden optimizar/simplificar. Por ejemplo, no necesita tres funciones para calcular el precio (por cierto, su cálculo es incorrecto; solo calculó el impuesto).
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>