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

除了范围问题之外，您在val1中使用了变量finalCalc，但从未使用过，原始的slider1Change函数使用的变量是val而不是{{1 }}

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

val1

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>

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

2 个答案: