如何从范围滑块中获取值，以便在计算中使用并显示结果

Question

我是一个试图构建太阳能计算器的完全初学者(为什么我自己这么做(我试过了所有的方法，但仍然停滞不前。这个想法是用户使用范围滑块将每月的电费添加到计算器中。然后我想使用他们在计算中输入的内容将他们的每月账单转换为千瓦时，但控制台日志显示"；未定义的"；我有一些常量可以与用户输入的值一起使用。如果在没有用户输入每月电费的情况下使用该计算，该计算是有效的——这是一个常数(我测试了它(，但我不知道如何在计算中使用用户输入。这是我所做事情的代码笔。我在那里得到的功能可能完全一团糟，但我不知道如何修复。请帮帮我，我的大脑已经变得一团糟，明天就要做了。我一个月前就开始了，必须一直重新开始，因为这里有太多需要做的事情，我不知道自己在做什么。

<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);

Answer 1

您正试图从定义monthlyBillval变量的函数范围之外访问该变量。这在Javascript中是不可能的，因为每个变量只能在定义它的函数的范围内访问

因此，所有如果检查都会产生false，因此monthlyBillToKwhConversion仍然是未定义的

如果您需要函数外部的东西，请考虑从函数中返回。

此外，在现代Javascript中，避免var声明被认为是一种最佳实践，因为这可能会导致意外的结果并扰乱全局范围。您应该使用let和const来定义您的变量。

Answer 2

您的代码也有一些范围问题：

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

monthlyBillval是一个元素而不是值，你不能这样做：

monthlyBillToKwhConversion = monthlyBillval / higherTarrif

你可以在codeopen 上看到工作代码