Valeur du curseur à utiliser dans le calcul

Question

Je suis actuellement bloqué à la construction d'une calculatrice pour mon site Web. J'ai plusieurs champs et deux curseurs qui font partie du calcul. J'ai d'abord travaillé sur la sortie des curseurs, mais maintenant je veux intégrer la valeur de la sortie dans mes calculs. Je n'ai pas encore trouvé de solution. Peux-tu m'aider? Les Slidervalues ​​sont intégrés dans le calcul, mais ils ne seront pas mis à jour instantanément. Je dois retourner dans un autre domaine pour que la fonction TKPJ fonctionne.

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

Vous avez oublié d'appeler la méthode TKPJ sur le changement du curseur. Ici, ce code fonctionne

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

Je ne sais pas si vous demandez ceci:

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

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