Im working on a price calculator at the moment but in the var proapp2 it will show NaN when the pro app Benutzer slider is 0 how can i make it show 0.00 instead of NaN? i tried if (isNaN(proapp2)) proapp2 = 0.00; but it didnt work?What am i doing wrong?Also i want it to return 0.00 instead of 0.i tried var proapp2 = proapp2 | 0; as well.
const btncalc = document.querySelector('.calcit'); const summetext = document.querySelector('.summe'); const backend = document.querySelector('.backenduser'); const update = document.querySelectorAll('.update'); const backendstk = document.querySelector('.backendanzahl') const appstk = document.querySelector('.appanzahl') const preisproapp = document.querySelector('.proapp') const preisprobackend = document.querySelector('.probackend') const jährlich = document.querySelector('.rabatt') update.forEach(input => { input.addEventListener('input', function () { calcSum(); }) }); //funktion damit der Slider sich beim eingeben vom input field bewegt function updateAppUser(val, inputtype) { if (inputtype == 'appslider') { document.getElementById('AppInput').value = val; } if (inputtype == 'appinput') { document.getElementById('appuserSlider').value = val; } calcSum(); } function updateBackendUser(val, inputtype) { if (inputtype == 'backendslider') { document.getElementById('BackendInput').value = val; } if (inputtype == 'backendinput') { document.getElementById('backendSlider').value = val; } calcSum(); } //Rechnung für die Anzahl von Backend und App-Benutzern function calcSum() { var backendanzahl = document.getElementsByClassName("backenduser")[0].value; var appanzahl = document.getElementsByClassName("appuser")[0].value; //Preisstaffelung für app und backend apppreis = 7.5; if (appanzahl < 11) { apppreis = 7.5; } else if (appanzahl < 26) { apppreis = 7; } else if (appanzahl < 51) { apppreis = 6.50; } else if (appanzahl < 76) { apppreis = 6; } else if (appanzahl > 76) { apppreis = 5.5; } var mylist = document.getElementById("myList"); var backendtype = mylist.options[mylist.selectedIndex].value; backendpreis = 35; if (backendtype == "ZR") { if (backendanzahl < 5) { backendpreis = 35; } else if (backendanzahl < 11) { backendpreis = 32.50; } else if (backendanzahl < 21) { backendpreis = 30; } } else { if (backendanzahl < 6) { backendpreis = 20; } else if (backendanzahl < 11) { backendpreis = 18; } else if (backendanzahl < 21) { backendpreis = 16; } } if (isNaN(proapp2)) proapp2 = 0.00; var mytext = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 1).toFixed(2); summetext.textContent = mytext; var backendpreissumme = (backendanzahl * backendpreis).toFixed(2); backendstk.textContent = backendpreissumme; var apppreissumme = (appanzahl * apppreis).toFixed(2); appstk.textContent = apppreissumme; var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2); preisprobackend.textContent = probackend2; var proapp2 = ((apppreis * appanzahl) / (appanzahl)).toFixed(2); preisproapp.textContent = proapp2; var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 0.9).toFixed(2); jährlich.textContent = jährlicherrabatt; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="grid-container"> <div class="grid-item"> <header>Preiskalkulator</header> <div class="slidecontainer"> App-Benutzer: <br> <input id="appuserSlider" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appslider');" class='appuser update'></input> <input type="text" id="AppInput" value="0" placeholder="1-100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appinput');"><br> Backendbenutzer: <br> <input id="backendSlider" value="1" onchange="updateBackendUser(this.value);" type="range" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendUser(this.value, 'backendslider'); " class='backenduser update'></input> <input type="text" id="BackendInput" value="1" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateBackendUser(this.value, 'backendinput');"><br> </div> <b> Bürosoftware wählen </b> <select id = "myList" onchange = "calcSum()" > <option value="Z">Zeiterfassung</option> <option value="ZR"> Zeiterfassung + Rechnungswesen</option> </select> </div> <div class="grid-item" style="width: 250px"> <table style="width:100%;text-align: right;"> <tr> <td style="width: 138px" >App-Benutzer<br> pro <span class="proapp" style="color:grey">7,50</span>€</td> <td style="width: 62px" class='appanzahl'>75,00€</td> </tr> <tr> <td>Backend-Benutzer<br >pro <span class='probackend'>35,00</span>€</td> <td class='backendanzahl'>175,00€</td> </tr> <tr><td colspan="2"><hr></td></tr> <tr> <td >Gesamtpreis:<br>(zzgl. MwSt)</td> <td class='summe'>75,00€</td> </tr> <tr> <td >Jährlich<br></td> <td class='rabatt'></td> </tr> </table> </div> <script src="./app.js"></script> </body> </html>
Advertisement
Answer
Thi is happening because of a divide by zero. Just change 1 line to have a ternary operator checking if the value you’re dividing by is greater than zero:
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00";
You can also get rid of this line
if (isNaN(proapp2)) proapp2 = 0.00;
Updated below.
const btncalc = document.querySelector('.calcit'); const summetext = document.querySelector('.summe'); const backend = document.querySelector('.backenduser'); const update = document.querySelectorAll('.update'); const backendstk = document.querySelector('.backendanzahl') const appstk = document.querySelector('.appanzahl') const preisproapp = document.querySelector('.proapp') const preisprobackend = document.querySelector('.probackend') const jährlich = document.querySelector('.rabatt') update.forEach(input => { input.addEventListener('input', function () { calcSum(); }) }); //funktion damit der Slider sich beim eingeben vom input field bewegt function updateAppUser(val, inputtype) { if (inputtype == 'appslider') { document.getElementById('AppInput').value = val; } if (inputtype == 'appinput') { document.getElementById('appuserSlider').value = val; } calcSum(); } function updateBackendUser(val, inputtype) { if (inputtype == 'backendslider') { document.getElementById('BackendInput').value = val; } if (inputtype == 'backendinput') { document.getElementById('backendSlider').value = val; } calcSum(); } //Rechnung für die Anzahl von Backend und App-Benutzern function calcSum() { var backendanzahl = document.getElementsByClassName("backenduser")[0].value; var appanzahl = document.getElementsByClassName("appuser")[0].value; //Preisstaffelung für app und backend apppreis = 7.5; if (appanzahl < 11) { apppreis = 7.5; } else if (appanzahl < 26) { apppreis = 7; } else if (appanzahl < 51) { apppreis = 6.50; } else if (appanzahl < 76) { apppreis = 6; } else if (appanzahl > 76) { apppreis = 5.5; } var mylist = document.getElementById("myList"); var backendtype = mylist.options[mylist.selectedIndex].value; backendpreis = 35; if (backendtype == "ZR") { if (backendanzahl < 5) { backendpreis = 35; } else if (backendanzahl < 11) { backendpreis = 32.50; } else if (backendanzahl < 21) { backendpreis = 30; } } else { if (backendanzahl < 6) { backendpreis = 20; } else if (backendanzahl < 11) { backendpreis = 18; } else if (backendanzahl < 21) { backendpreis = 16; } } var mytext = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 1).toFixed(2); summetext.textContent = mytext; var backendpreissumme = (backendanzahl * backendpreis).toFixed(2); backendstk.textContent = backendpreissumme; var apppreissumme = (appanzahl * apppreis).toFixed(2); appstk.textContent = apppreissumme; var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2); preisprobackend.textContent = probackend2; var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00"; preisproapp.textContent = proapp2; var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 0.9).toFixed(2); jährlich.textContent = jährlicherrabatt; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="grid-container"> <div class="grid-item"> <header>Preiskalkulator</header> <div class="slidecontainer"> App-Benutzer: <br> <input id="appuserSlider" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appslider');" class='appuser update'></input> <input type="text" id="AppInput" value="0" placeholder="1-100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appinput');"><br> Backendbenutzer: <br> <input id="backendSlider" value="1" onchange="updateBackendUser(this.value);" type="range" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendUser(this.value, 'backendslider'); " class='backenduser update'></input> <input type="text" id="BackendInput" value="1" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateBackendUser(this.value, 'backendinput');"><br> </div> <b> Bürosoftware wählen </b> <select id = "myList" onchange = "calcSum()" > <option value="Z">Zeiterfassung</option> <option value="ZR"> Zeiterfassung + Rechnungswesen</option> </select> </div> <div class="grid-item" style="width: 250px"> <table style="width:100%;text-align: right;"> <tr> <td style="width: 138px" >App-Benutzer<br> pro <span class="proapp" style="color:grey">7,50</span>€</td> <td style="width: 62px" class='appanzahl'>75,00€</td> </tr> <tr> <td>Backend-Benutzer<br >pro <span class='probackend'>35,00</span>€</td> <td class='backendanzahl'>175,00€</td> </tr> <tr><td colspan="2"><hr></td></tr> <tr> <td >Gesamtpreis:<br>(zzgl. MwSt)</td> <td class='summe'>75,00€</td> </tr> <tr> <td >Jährlich<br></td> <td class='rabatt'></td> </tr> </table> </div> <script src="./app.js"></script> </body> </html>