Slider Wert in der Berechnung verwendet werden

Question

Ich bin derzeit stecken auf einen Rechner für meine Website zu bauen. Ich habe mehrere Felder und 2 Schieberegler, die Teil der Berechnung sind. Zuerst habe ich die Ausgabe der Schieberegler funktioniert, aber jetzt möchte ich den Wert der Ausgabe in meine Berechnungen integrieren. Ich bin noch nicht zu einer Lösung gekommen. Kannst du mir helfen?

Die Slidervalues ​​werden in die Berechnung integriert, aber sie werden nicht sofort aktualisiert. Ich muss zu einem anderen Feld zurückkehren, um die TKPJ-Funktion zu aktivieren.

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> 
 
        

Answer 1

Sie haben vergessen, über die Änderung des Schiebers die TKPJ Methode aufzurufen. Hier dieser Code funktioniert

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>

Answer 2

Nicht sicher, ob Sie diese fragen:

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

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