Entonces, en el momento en que ingreso un número en el campo de texto, el control deslizante de rango no se mueve y el cálculo no ocurre, ¿qué puedo hacer? Cuando escribo un número en el campo de entrada, el control deslizante de rango cambia y los cálculos.
HTML y JS:
const btncalc = document.querySelector('.calcit'); const summetext = document.querySelector('.summe'); const backend = document.querySelector('.backenduser'); const update = document.querySelectorAll('.update'); update.forEach(input => { input.addEventListener('input', function() { var backendanzahl = document.getElementsByClassName("backenduser")[0].value; //zahlen ändern sich nicht wenn ich die pfeiltaste benutze var appanzahl = document.getElementsByClassName("appuser")[0].value; var mytext = "Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5); summetext.textContent = mytext; }) }); function updateAppUser(val) { document.getElementById('textInput').value=val; } function updateBackendBenutzer(val1) { document.getElementById('textInput1').value=val1; } <div class="slidecontainer"> <body> <div class="slidecontainer"> App-Benutzer: <input onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value); this.value=textInput.value " class='appuser update'></input><br> <input type="text" id="textInput" value="" placeholder="1-100" oninput="textInput.value=this.value "><br> Backendbenutzer: <input onchange="updateBackendBenutzer(this.value);" type="range" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendBenutzer(this.value); this.value=textInput.value " class='backenduser update'></input><br> <input type="text" id="textInput1" value="" placeholder="1-15"><br> <button class='calcit'>Berechnen</button><br> <span class='summe'>0.00</span><br> <script src="./app.js"></script> </div> </body>Simplifiqué ligeramente su html para que la lógica sea más clara.
Modelé el concepto de entrada reflejada de modo que a cada elemento de entrada que tenga la clase input-mirrored , al cargar la página, se le agregue un oyente para el evento de change . El controlador obtendrá el atributo data-twins del elemento que desencadena el evento y reflejará su valor en los elementos de identificación enumerados allí.
Además, después de reflejar el valor, la salida del mensaje se actualiza con el nuevo resultado del cálculo.
La única característica que falta aquí, en comparación con su código, es limitar el número de entrada si lo corrige más allá del rango. Puse un comentario en mi código donde podría agregarse, pero debería usar dinámicamente el atributo max si está presente.
* Considere que, dado que utilicé el evento de change , debe eliminar el foco de la entrada de texto para ver cómo reacciona la interfaz de usuario.
document.querySelectorAll('.input-mirrored').forEach((o, i)=>{ o.addEventListener('change', (event)=>{ //you have the chance here to validate the number and cap it for example const el = event.target; const twins = el.dataset.twins.split(','); for(twinId of twins){ document.getElementById(twinId).value = el.value; } showResult(); }); }); function showResult(){ const backendanzahl = document.getElementById('input_backendbenutzer').value; const appanzahl = document.getElementById('input_appbenutzer').value; document.getElementById('summe') .textContent = "Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5); } #summe{ display: inline-block; padding: .15rem; font-size: 2rem; font-weight: 600; } #calcit{ display: inline-block; font-size: 2rem; } <p>App-Benutzer:</p> <input id="range1" class="input-mirrored" data-twins="text1,input_appbenutzer" type="range" value="0" min="0" max="100"> <input id="text1" class="input-mirrored" data-twins="range1,input_backendbenutzer" type="text" value="0" placeholder="1-100"> <br> <p>Backendbenutzer: </p> <input id="range2" class="input-mirrored" data-twins="text2,input_appbenutzer" type="range" value="0" min="1" max="15"> <input id="text2" class="input-mirrored" data-twins="range2,input_backendbenutzer" type="text" value="0" placeholder="1-15"> <hr> <input type="hidden" id="input_appbenutzer" value="0"> <input type="hidden" id="input_backendbenutzer" value="0"> <button id='calcit' onclick="showResult();">Berechnen</button> <span id='summe'>0.00</span><br>