So at the moment when i enter a number in the text field the range slider doesnt move and the calculation doesnt happen what can i do so when i type a number in the input field the range slider changes and the calculations.
HTML and 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>I slightly semplified your html to make the logics more clear.
I modeled the concept of mirrored input so that to every input element having the class input-mirrored, on page load, gets added a listener for the change event. The handler will fetch the attribute data-twins of the element triggering the event, and will mirror its value to those id elements listed there.
Plus, after mirroring the value, the message output gets updated with the new result of the calculation.
The only missing feature here, compared to your code, is capping the input number were you correct it beyond range. I put a comment in my code where it could be added but it should dynamically use the max attribute if present.
*consider that since I used the change event, you have to remove focus from the text input to see the UI react.
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>