用于计算的滑块值

Question

我目前正忙于为我的网站构建计算器。我有多个字段和 2 个滑块，它们是计算的一部分。首先我得到了滑块的输出，但现在我想将输出值整合到我的计算中。我还没有找到解决方案。你能帮帮我吗？

滑块值已集成到计算中，但不会立即更新。我必须回到另一个领域才能使 TKPJ 功能正常工作。

function outputUpdate(vol) {
 document.querySelector('#volume').value = vol;
}

function outputUpdate2(vol2) {
 document.querySelector('#volume2').value = vol2;
}


  function TKPJ(){
    var Field1 = document.getElementById('Field1').value;
    var Field2 = document.getElementById('Field2').value;
    var Field3 = document.getElementById('Field3').value;
    var Format = document.getElementById('Format').value;
    var Slider1 = document.getElementById('Slider1').value;
    var Slider2 = document.getElementById('Slider2').value;
   var vol = document.getElementById('volume').value;
   var vol2 = document.getElementById('volume2').value;
    var Total = ((Field1*Field2*Field3*Format*vol*vol2)/100).toFixed(2);

    Total = Total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('Total').innerHTML = "Cost per year = "+ Total +" €";





  }

                     <p>Field1</p>
                     <input type="number" name="Field1" id="Field1" onkeyup="TKPJ()">
                  </div>

                     <p>Field2</p>
                     <input  type="number" name="Field2" id="Field2" onkeyup="TKPJ()">

                     <p>Field3</p>
                     <input type="number" name="Field3" id="Field3" onkeyup="TKPJ()">

                     <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()">
                     <option value="1">Year</option>
                     <option value="12">Month</option>
                     <option value="365">Day</option>
                    </select>

                        <p>Slider1</p>
                        <input id="Slider1" type="range" min="0.20" max="5" step="0.01" value="1.50" oninput="outputUpdate(this.value)">
                        
        <output for="Preisliter" id="volume"> 1.50 </output>
                        <br>

                        <p>Slider2</p>
                        <input id="Slider2" type="range" min="0.1" max="25" step="0.1" value="12.50" oninput="outputUpdate2(this.value)">
                        
  <output for="Slider2" id="volume2"> 12.5 </output>
  
                          <h3 id="Total">Cost per year = 0,00€</h3>

Answer 1

您忘记在更改滑块时调用 TKPJ 方法。这里代码有效

function outputUpdate(vol) {
 document.querySelector('#volume').value = vol;
  TKPJ()
}

function outputUpdate2(vol2) {
 document.querySelector('#volume2').value = vol2;
  TKPJ()
}


  function TKPJ(){
    var Field1 = document.getElementById('Field1').value;
    var Field2 = document.getElementById('Field2').value;
    var Field3 = document.getElementById('Field3').value;
    var Format = document.getElementById('Format').value;
    var Slider1 = document.getElementById('Slider1').value;
    var Slider2 = document.getElementById('Slider2').value;
   var vol = document.getElementById('volume').value;
   var vol2 = document.getElementById('volume2').value;
    var Total = ((Field1*Field2*Field3*Format*vol*vol2)/100).toFixed(2);

    Total = Total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('Total').innerHTML = "Cost per year = "+ Total +" €";





  }

<p>Field1</p>
                     <input type="number" name="Field1" id="Field1" onkeyup="TKPJ()">
                  </div>

                     <p>Field2</p>
                     <input  type="number" name="Field2" id="Field2" onkeyup="TKPJ()">

                     <p>Field3</p>
                     <input type="number" name="Field3" id="Field3" onkeyup="TKPJ()">

                     <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()">
                     <option value="1">Year</option>
                     <option value="12">Month</option>
                     <option value="365">Day</option>
                    </select>

                        <p>Slider1</p>
                        <input id="Slider1" type="range" min="0.20" max="5" step="0.01" value="1.50" oninput="outputUpdate(this.value)">
                        
        <output for="Preisliter" id="volume"> 1.50 </output>
                        <br>

                        <p>Slider2</p>
                        <input id="Slider2" type="range" min="0.1" max="25" step="0.1" value="12.50" oninput="outputUpdate2(this.value)">
                        
  <output for="Slider2" id="volume2"> 12.5 </output>
  
                          <h3 id="Total">Cost per year = 0,00€</h3>

Answer 2

不确定您是否在问这个问题:

function outputUpdate(vol) {
    document.querySelector('#volume').value = vol;
    TKPJ();
}

function outputUpdate2(vol2) {
    document.querySelector('#volume2').value = vol2;
    TKPJ();
}

用于计算的滑块值

Slider value to be used in calculation

html

javascript

slider

calculation