How to get the value from a range slider so that it can be used in a calculation and display a resul-CodePudding

I'm a complete beginner trying to build a solar power calculator (why did I do this to myself) I've tried everything but I'm still stuck. The idea is that users use a range slider to add their monthly electricity bill to a calculator. I want to then use what they entered in a calculation to convert their monthly bill to kwh but Console log shows "undefined" I have some constants that works with the value entered by the user. The calculation works if used without user input for the monthly electricity bill - a constant (I tested it) but I can't figure out how to use the user input in the calculation. Here's a codepen of what I did. The function I got there is probably a total mess but I don't know how to fix it. Please help, my brain have turned to mush and this is due tomorrow. I started like a month ago on this having to restart all the time because there is so much that needs to go in here and I don't know what I'm doing.

<h2>Solar Power Calculator</h2>
Monthly Electricity Bill: 
<input type="range" min="100" max="10000" value="0" step="1" onchange="getSliderValues(this.value)" style="width:400px;">
<span id="monthlyBillval">0%</span>
<h2>Monthly Bill to KWH <span id="monthlyBill"></span></h2>


//initial variables
var phases = 1;
var systemCost = 247765.00;
var sizeOfPanelArray = 8.19;
var batteryBankCapacity = 22.20;
var payBackPeriod = 5.3;
var monthlyEstimatedSavings = 3864.00
  

//  var amortData = [];

// Constants
var singlePhaseBaseCost = 41000;
var threePhaseBaseCost = 69000;
var panelCost = 2639;
var fiveKwSinglePhaseInverter = 17371;
var eightKwSinglePhaseInverter = 28344;
var twelveKwThreePhaseInverter = 43783;
var batteryCost = 29160;
var panelPeakPower = 455;
var avgDailySunHrs = 5.33;
var avgDaysPerMonth = 30.5;
var batteryCapacity = 7.4;
var maxCeilingDiscountedBracketInRands = 1440;
var lowBracketKwh = 600;
var discountedTarrif = 2.400395;
var higherTarrif = 3.312575;


 

    function getSliderValues (billSlider){
      var monthlyBill = document.getElementById('monthlyBill');
      var monthlyBillval = document.getElementById('monthlyBillval');
      monthlyBillval.innerHTML = billSlider;}
    
    var monthlyBillToKwhConversion;
    if (monthlyBillval < maxCeilingDiscountedBracketInRands) {
       monthlyBillToKwhConversion = monthlyBillval / higherTarrif
    }
    else if (monthlyBillval > maxCeilingDiscountedBracketInRands) {
       monthlyBillToKwhConversion = Math.round (((monthlyBillval - maxCeilingDiscountedBracketInRands)/ higherTarrif)   (maxCeilingDiscountedBracketInRands/discountedTarrif))
    }
    console.log("monthly bill to kWh conversion:"   monthlyBillToKwhConversion);

CodePudding user response：

You're trying to access the monthlyBillval variable from outside the scope of the function where it's defined. That's not possible in Javascript as each variable is accessible only inside the scope of the function that defined it.

So all your if checks yield false, hence monthlyBillToKwhConversion remains undefined

Consider to return something from your function if you need outside it.

Moreover, in modern Javascript it's considered a best practice to avoid the var declaration because could lead to unexpected results and mess up the global scope. You should use let and const to define your variables.

CodePudding user response：

Your code has some scope issues, also :

  var monthlyBillval = document.getElementById('monthlyBillval');

monthlyBillval is an element not value, you can't do this:

monthlyBillToKwhConversion = monthlyBillval / higherTarrif

you can see the working code on codeopen