用于计算的滑条值

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

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

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

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

 

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

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

 

 

 

 

 
    }

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

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

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

 
       \t \t \t <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()"> 
 
       \t \t \t \t \t <option value="1">Year</option> 
 
       \t \t \t \t \t <option value="12">Month</option> 
 
       \t \t \t \t \t <option value="365">Day</option> 
 
       \t \t \t \t </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>

来源

2017-10-17 Marcel Lein

你忘了调用TKPJ方法上的滑块改变。下面这个代码工作

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

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

 

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

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

 

 

 

 

 
    }

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

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

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

 
       \t \t \t <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()"> 
 
       \t \t \t \t \t <option value="1">Year</option> 
 
       \t \t \t \t \t <option value="12">Month</option> 
 
       \t \t \t \t \t <option value="365">Day</option> 
 
       \t \t \t \t </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>

来源

2017-10-17 11:00:04

它的工作！也谢谢你！ –

不知道你问这个：

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

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

来源

2017-10-17 11:00:58

哇！非常感谢... –

用于计算的滑条值

回答

相关问题