一页上的多个表单滑块（JS 变量范围）

Question

我了解这里问题的要点，但不知道如何解决它。 我在一页上有多个表单滑块，它们将加起来进行最终计算（向用户显示某种节省）。在函数finalCalc 中，它无法知道 val1、val2 和 val3 是什么，因为它们超出了函数的范围。

 <script type="text/javascript">
function slider1Change(val){
document.getElementById('slider1Status').innerHTML = val;
}

function slider2Change(val2){
document.getElementById('slider2Status').innerHTML = val2;
}

function slider3Change(val3){
document.getElementById('slider3Status').innerHTML = val3;
}

function finalCalc(val4){
document.getElementById('finalCalc').innerHTML = val1 + val2 + val3;
}
</script>

<form>
  <div class="form-group">
    <label for="formControlRange">Number of Sales:</label>   <span id="slider1Status">50</span>
    <input type="range" class="form-control-range" onInput="slider1Change(this.value)">
  </div>


   <div class="form-group">
    <label for="formControlRange">Number of Transactions:</label>  <span id="slider2Status">50</span>
    <input type="range" class="form-control-range" onInput="slider2Change(this.value)">
  </div>

   <div class="form-group">
    <label for="formControlRange">Number of Returns:</label>  <span id="slider3Status">50</span>
    <input type="range" class="form-control-range" onInput="slider3Change(this.value)">
  </div>
</form>

<h2>You could be saving $<span id="finalCalc">50</span> per month by switching to CompanyX</h2>

Answer 1

除了范围问题，您在finalCalc 中使用了变量val1，但您从未使用过它，原来的slider1Change 函数使用名为val 的变量而不是val1

在全局范围内设置变量并在每个函数上更新它们：

 <script type="text/javascript">

var val1, val2, val3;

function slider1Change(valArg){
val1 = valArg;
document.getElementById('slider1Status').innerHTML = val1;
}

function slider2Change(valArg){
val2 = valArg;
document.getElementById('slider2Status').innerHTML = val2;
}

function slider3Change(valArg){
val3 = valArg;
document.getElementById('slider3Status').innerHTML = val3;
}

function finalCalc(val4){
document.getElementById('finalCalc').innerHTML = val1 + val2 + val3;
}
</script>

<form>
  <div class="form-group">
    <label for="formControlRange">Number of Sales:</label>   <span id="slider1Status">50</span>
    <input type="range" class="form-control-range" onInput="slider1Change(this.value)">
  </div>


   <div class="form-group">
    <label for="formControlRange">Number of Transactions:</label>  <span id="slider2Status">50</span>
    <input type="range" class="form-control-range" onInput="slider2Change(this.value)">
  </div>

   <div class="form-group">
    <label for="formControlRange">Number of Returns:</label>  <span id="slider3Status">50</span>
    <input type="range" class="form-control-range" onInput="slider3Change(this.value)">
  </div>
</form>

<h2>You could be saving $<span id="finalCalc">50</span> per month by switching to CompanyX</h2>

Answer 2

在更改每个滑块时调用finalCalc(); 并获取slider1Status、slider2Status、slider3Status 的值

function slider1Change(val){
document.getElementById('slider1Status').innerHTML = val;
finalCalc();
}

function slider2Change(val2){
document.getElementById('slider2Status').innerHTML = val2;
finalCalc();
}

function slider3Change(val3){
document.getElementById('slider3Status').innerHTML = val3;
finalCalc();
}

function finalCalc(){
var val1=parseInt(document.getElementById('slider1Status').innerHTML,10);
var val2=parseInt( document.getElementById('slider2Status').innerHTML,10); 
var val3=parseInt(document.getElementById('slider3Status').innerHTML,10);
document.getElementById('finalCalc').innerHTML = (val1+val2+val3);
}

<form>
  <div class="form-group">
    <label for="formControlRange">Number of Sales:</label>   <span id="slider1Status">50</span>
    <input type="range" class="form-control-range" onInput="slider1Change(this.value)">
  </div>


   <div class="form-group">
    <label for="formControlRange">Number of Transactions:</label>  <span id="slider2Status">50</span>
    <input type="range" class="form-control-range" onInput="slider2Change(this.value)">
  </div>

   <div class="form-group">
    <label for="formControlRange">Number of Returns:</label>  <span id="slider3Status">50</span>
    <input type="range" class="form-control-range" onInput="slider3Change(this.value)">
  </div>
</form>

<h2>You could be saving $<span id="finalCalc">50</span> per month by switching to CompanyX</h2>