如何从范围滑块获取值，以便将其用于计算并显示结果？

Question

我是一个完全的初学者，试图构建一个太阳能计算器（为什么我要自己这样做）我已经尝试了一切，但我仍然被困住。这个想法是用户使用范围滑块将每月的电费添加到计算器中。然后我想使用他们在计算中输入的内容将每月账单转换为千瓦时，但控制台日志显示“未定义”我有一些常量与用户输入的值配合使用。如果在没有用户输入每月电费的情况下使用该计算 - 一个常数（我测试过），但我不知道如何在计算中使用用户输入。这是我所做的 codepen 。我在那里得到的功能可能一团糟，但我不知道如何修复它。请帮忙，我的大脑已经变成糊状，明天就要到期了。我大约一个月前就开始考虑必须一直重新启动，因为这里有太多需要处理的事情，而我不知道自己在做什么。

<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

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

因此，您所有的 if 检查都会产生 false，因此 monthlyBillToKwhConversion 仍然未定义

如果需要，请考虑从函数中返回某些内容在它之外。

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

Answer 2

您的代码存在一些范围问题，另外：

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

monthlyBillval 是一个元素而不是值，您不能执行此操作：

monthlyBillToKwhConversion = monthlyBillval / higherTarrif

您可以在 代码开放