How does one prevent NaN as return value of various number value calculations?-CodePudding

Im new to Javascript and im trying to do a calculation which changes depending on the number that is typed into the input. However the functions make the output into a NaN, so Im wondering if I can transform the NaN in a normal number(So that I can add hUeCalc and massCalc together and display it as a number) to use or if I have to use another option to do the calculations.

Maybe switch and case might be an option but im not quite sure if they would have the effect I need.

In the Code below you can see the function which is executed when pressed on a button. Right now when I click the button that activates the function calc I get NaN in tax.innerHTML instead of a number.

Thanks in advance.

function calc() {
    let hubraum = Number(hubraumComponent.value);
    let emission = Number(emissionComponent.value);
    let masse = Number(masseComponent.value);

    let hUeCalc = Number(function (){
        if (Diesel.checked == true) {
            ((Math.ceil((hubraum/100)))*9.5) ((emission-95)*2);
        }
        else if (Benzin.checked == true) {
            ((Math.ceil((hubraum/100)))*2) ((emission-95)*2);
        };
    });

    let masseCalc = Number(function (){
        let masseValue;
        if (masse <= 2000) {
           masseValue = (Math.ceil((masse/200)*5.625));
        }
        else if (masse >= 3000) {
            masseValue =(Math.ceil((masse/200)*6.01));
        }
        else if (masse >= 3500) {
            masseValue = (Math.ceil(masse/200)*6.39);
        };
    });
    // let masseValue = (Math.ceil (masse/200));

    let berechnung = (hUeCalc   masseCalc);
    tax.innerHTML = (berechnung)   "€";
    console.log('Calc has been done');
    console.log('hubraum value is '   hubraum);
    console.log('emission value is '   emission);
    console.log('masse value is '   masse);
    console.log('hubraumcalc value is '   hUeCalc);
    console.log('massecalc value is '   masseCalc);
}

Also here is the HTML incase you want to see the button that activates all of this

<div class="input-field-second-calc" onclick="calc()">
                <input type="button" class="btn btn-outline-primary" value="berechnen">
                <br>
                <a id="tax"></a>
            </div>

CodePudding user response：

You need to return a value in your two functions !

When you do :

let hUeCalc = Number(function (){
    if (Diesel.checked == true) {
        ((Math.ceil((hubraum/100)))*9.5) ((emission-95)*2);
    }
    else if (Benzin.checked == true) {
        ((Math.ceil((hubraum/100)))*2) ((emission-95)*2);
    };
})

You're basically saying please convert the return value of the function to a number and assign it to hUeCalc. But as the function return nothing. It is trying to convert undefined to a number. which give NaN as a result.

The same goes for :

 let masseCalc = Number(function (){
    let masseValue;
    if (masse <= 2000) {
       masseValue = (Math.ceil((masse/200)*5.625));
    }
    else if (masse >= 3000) {
        masseValue =(Math.ceil((masse/200)*6.01));
    }
    else if (masse >= 3500) {
        masseValue = (Math.ceil(masse/200)*6.39);
    };
});

By the way, with :

if (masse <= 2000) {
   masseValue = (Math.ceil((masse/200)*5.625));
}
else if (masse >= 3000) {
    masseValue =(Math.ceil((masse/200)*6.01));
}
else if (masse >= 3500) {
    masseValue = (Math.ceil(masse/200)*6.39);
};

You'll never get to the last else if as if we try it with 3700 for example. It will not match on the first if but on the second as 3700 is greater than 3000. You need to invert the order of the two else if.

And you need to add a else too for the number between 2000 and 3000 (If it's a accepted value)

CodePudding user response：

A code refactoring should separate both current calculations each into a part that provides/implements a single specialized calculation function and a part which invokes the calculation with the correct values including valid fallback values in case some conditions could not be met.

In addition I suggest to fix the naming. Don't mix the languages. Skip the German part since most of the code (including the logging) is named and commented in English.

function getCalculatedHUeValue(displacement, emission, fuelFactor) {
  return (Math.ceil(displacement / 100) * fuelFactor)   ((emission - 95) * 2);
}
function getCalculatedMassValue(mass, massFactor) {
  return Math.ceil(mass / 200 * massFactor);
}

function calc() {
  const displacement = Number(displacementComponent.value);
  const emission = Number(emissionComponent.value);
  const mass = Number(massComponent.value);

  const hUeCalc = getCalculatedHUeValue(displacement, emission,
    (Diesel.checked && 9.5) ||
    (Benzin.checked && 2) ||
    0 // default/fallback value needs to be provided/known.
  );
  const massCalc = getCalculatedMassValue(mass,
    ((mass <= 2000) && 5.625) ||
    ((mass >= 3000) && 6.01) ||
    ((mass >= 3500) && 6.39) ||
    0 // default/fallback value needs to be provided/known.
  );
  const result = (hUeCalc   massCalc);

  tax.innerHTML = (result   "€");

  console.log('Calculation is done');
  console.log('displacement value is '   displacement);
  console.log('emission value is '   emission);
  console.log('mass value is '   mass);
  console.log('hUeCalc value is '   hUeCalc);
  console.log('massCalc value is '   massCalc);
}

CodePudding user response：

If you try the following code I think it should work. As you see if you want to use a function to assing a value the function has to return something, if it doesn't there's no value to assign. You also need to make sure the function is excecuted, if you don't the let hUeCalc = function(){} just becomes the function identifier.

function calc() {
    let hubraum = Number(hubraumComponent.value);
    let emission = Number(emissionComponent.value);
    let masse = Number(masseComponent.value);

    let hUeCalc = Number(function (){
        if (Diesel.checked == true) {
            return ((Math.ceil((hubraum/100)))*9.5) ((emission-95)*2);
        }
        else if (Benzin.checked == true) {
            return ((Math.ceil((hubraum/100)))*2) ((emission-95)*2);
        };
    }());

    let masseCalc = Number(function (){
        let masseValue;
        if (masse <= 2000) {
            return masseValue = (Math.ceil((masse/200)*5.625));
        }
        else if (masse >= 3000) {
            return masseValue =(Math.ceil((masse/200)*6.01));
        }
        else if (masse >= 3500) {
            return masseValue = (Math.ceil(masse/200)*6.39);
        };
    }()); // using () right after the function makes it so it get excecuted immediately
    // let masseValue = (Math.ceil (masse/200));

    let berechnung = (hUeCalc   masseCalc);
    tax.innerHTML = (berechnung)   "€";
    console.log('Calc has been done');
    console.log('hubraum value is '   hubraum);
    console.log('emission value is '   emission);
    console.log('masse value is '   masse);
    console.log('hubraumcalc value is '   hUeCalc);
    console.log('massecalc value is '   masseCalc);
}