一页上有多个表单滑块(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();并获取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>

Answer 2

撇开作用域问题不谈，你在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>