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.
JavaScript
x
94
94
1
const btncalc = document.querySelector('.calcit');2
const summetext = document.querySelector('.summe');3
const backend = document.querySelector('.backenduser');4
const update = document.querySelectorAll('.update');5
const backendstk = document.querySelector('.backendanzahl')6
const appstk = document.querySelector('.appanzahl')7
const preisproapp = document.querySelector('.proapp')8
const preisprobackend = document.querySelector('.probackend')9
const jährlich = document.querySelector('.rabatt')10
11
update.forEach(input => {12
input.addEventListener('input', function () {13
calcSum();14
})15
});16
//funktion damit der Slider sich beim eingeben vom input field bewegt17
function updateAppUser(val, inputtype) {18
if (inputtype == 'appslider') {19
document.getElementById('AppInput').value = val;20
}21
if (inputtype == 'appinput') {22
document.getElementById('appuserSlider').value = val;23
}24
calcSum();25
}26
function updateBackendUser(val, inputtype) {27
if (inputtype == 'backendslider') {28
document.getElementById('BackendInput').value = val;29
}30
if (inputtype == 'backendinput') {31
document.getElementById('backendSlider').value = val;32
}33
calcSum();34
}35
36
37
//Rechnung für die Anzahl von Backend und App-Benutzern38
function calcSum() {39
var backendanzahl = document.getElementsByClassName("backenduser")[0].value;40
var appanzahl = document.getElementsByClassName("appuser")[0].value;41
//Preisstaffelung für app und backend42
apppreis = 7.5;43
if (appanzahl < 11) {44
apppreis = 7.5;45
} else if (appanzahl < 26) {46
apppreis = 7;47
} else if (appanzahl < 51) {48
apppreis = 6.50;49
} else if (appanzahl < 76) {50
apppreis = 6;51
} else if (appanzahl > 76) {52
apppreis = 5.5;53
}54
55
var mylist = document.getElementById("myList");56
var backendtype = mylist.options[mylist.selectedIndex].value;57
backendpreis = 35;58
if (backendtype == "ZR") {59
if (backendanzahl < 5) {60
backendpreis = 35;61
} else if (backendanzahl < 11) {62
backendpreis = 32.50;63
} else if (backendanzahl < 21) {64
backendpreis = 30;65
}66
} else {67
if (backendanzahl < 6) {68
backendpreis = 20;69
} else if (backendanzahl < 11) {70
backendpreis = 18;71
} else if (backendanzahl < 21) {72
backendpreis = 16;73
}74
}75
if (isNaN(proapp2)) proapp2 = 0.00;76
77
var mytext = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 1).toFixed(2);78
summetext.textContent = mytext;79
80
var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);81
backendstk.textContent = backendpreissumme;82
83
var apppreissumme = (appanzahl * apppreis).toFixed(2);84
appstk.textContent = apppreissumme;85
86
var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);87
preisprobackend.textContent = probackend2;88
89
var proapp2 = ((apppreis * appanzahl) / (appanzahl)).toFixed(2);90
preisproapp.textContent = proapp2;91
92
var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 0.9).toFixed(2);93
jährlich.textContent = jährlicherrabatt;94
}JavaScript
1
51
51
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<link rel="stylesheet" href="styles.css">5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>Document</title>9
</head>10
<body>11
<div class="grid-container">12
<div class="grid-item">13
<header>Preiskalkulator</header>14
<div class="slidecontainer">15
App-Benutzer: <br>16
<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>17
<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>18
Backendbenutzer: <br>19
<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>20
<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>21
</div>22
<b> Bürosoftware wählen </b>23
<select id = "myList" onchange = "calcSum()" >24
<option value="Z">Zeiterfassung</option>25
<option value="ZR"> Zeiterfassung + Rechnungswesen</option>26
</select>27
</div>28
<div class="grid-item" style="width: 250px">29
<table style="width:100%;text-align: right;">30
<tr>31
<td style="width: 138px" >App-Benutzer<br> pro <span class="proapp" style="color:grey">7,50</span>€</td>32
<td style="width: 62px" class='appanzahl'>75,00€</td>33
</tr>34
<tr>35
<td>Backend-Benutzer<br >pro <span class='probackend'>35,00</span>€</td>36
<td class='backendanzahl'>175,00€</td>37
</tr>38
<tr><td colspan="2"><hr></td></tr>39
<tr>40
<td >Gesamtpreis:<br>(zzgl. MwSt)</td>41
<td class='summe'>75,00€</td>42
</tr>43
<tr>44
<td >Jährlich<br></td>45
<td class='rabatt'></td>46
</tr>47
</table>48
</div>49
<script src="./app.js"></script>50
</body>51
</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:
JavaScript
1
2
1
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00";2
You can also get rid of this line
JavaScript
1
2
1
if (isNaN(proapp2)) proapp2 = 0.00;2
Updated below.
JavaScript
1
93
93
1
const btncalc = document.querySelector('.calcit');2
const summetext = document.querySelector('.summe');3
const backend = document.querySelector('.backenduser');4
const update = document.querySelectorAll('.update');5
const backendstk = document.querySelector('.backendanzahl')6
const appstk = document.querySelector('.appanzahl')7
const preisproapp = document.querySelector('.proapp')8
const preisprobackend = document.querySelector('.probackend')9
const jährlich = document.querySelector('.rabatt')10
11
update.forEach(input => {12
input.addEventListener('input', function () {13
calcSum();14
})15
});16
//funktion damit der Slider sich beim eingeben vom input field bewegt17
function updateAppUser(val, inputtype) {18
if (inputtype == 'appslider') {19
document.getElementById('AppInput').value = val;20
}21
if (inputtype == 'appinput') {22
document.getElementById('appuserSlider').value = val;23
}24
calcSum();25
}26
function updateBackendUser(val, inputtype) {27
if (inputtype == 'backendslider') {28
document.getElementById('BackendInput').value = val;29
}30
if (inputtype == 'backendinput') {31
document.getElementById('backendSlider').value = val;32
}33
calcSum();34
}35
36
37
//Rechnung für die Anzahl von Backend und App-Benutzern38
function calcSum() {39
var backendanzahl = document.getElementsByClassName("backenduser")[0].value;40
var appanzahl = document.getElementsByClassName("appuser")[0].value;41
//Preisstaffelung für app und backend42
apppreis = 7.5;43
if (appanzahl < 11) {44
apppreis = 7.5;45
} else if (appanzahl < 26) {46
apppreis = 7;47
} else if (appanzahl < 51) {48
apppreis = 6.50;49
} else if (appanzahl < 76) {50
apppreis = 6;51
} else if (appanzahl > 76) {52
apppreis = 5.5;53
}54
55
var mylist = document.getElementById("myList");56
var backendtype = mylist.options[mylist.selectedIndex].value;57
backendpreis = 35;58
if (backendtype == "ZR") {59
if (backendanzahl < 5) {60
backendpreis = 35;61
} else if (backendanzahl < 11) {62
backendpreis = 32.50;63
} else if (backendanzahl < 21) {64
backendpreis = 30;65
}66
} else {67
if (backendanzahl < 6) {68
backendpreis = 20;69
} else if (backendanzahl < 11) {70
backendpreis = 18;71
} else if (backendanzahl < 21) {72
backendpreis = 16;73
}74
}75
76
var mytext = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 1).toFixed(2);77
summetext.textContent = mytext;78
79
var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);80
backendstk.textContent = backendpreissumme;81
82
var apppreissumme = (appanzahl * apppreis).toFixed(2);83
appstk.textContent = apppreissumme;84
85
var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);86
preisprobackend.textContent = probackend2;87
88
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00";89
preisproapp.textContent = proapp2;90
91
var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 0.9).toFixed(2);92
jährlich.textContent = jährlicherrabatt;93
}JavaScript
1
51
51
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<link rel="stylesheet" href="styles.css">5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>Document</title>9
</head>10
<body>11
<div class="grid-container">12
<div class="grid-item">13
<header>Preiskalkulator</header>14
<div class="slidecontainer">15
App-Benutzer: <br>16
<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>17
<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>18
Backendbenutzer: <br>19
<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>20
<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>21
</div>22
<b> Bürosoftware wählen </b>23
<select id = "myList" onchange = "calcSum()" >24
<option value="Z">Zeiterfassung</option>25
<option value="ZR"> Zeiterfassung + Rechnungswesen</option>26
</select>27
</div>28
<div class="grid-item" style="width: 250px">29
<table style="width:100%;text-align: right;">30
<tr>31
<td style="width: 138px" >App-Benutzer<br> pro <span class="proapp" style="color:grey">7,50</span>€</td>32
<td style="width: 62px" class='appanzahl'>75,00€</td>33
</tr>34
<tr>35
<td>Backend-Benutzer<br >pro <span class='probackend'>35,00</span>€</td>36
<td class='backendanzahl'>175,00€</td>37
</tr>38
<tr><td colspan="2"><hr></td></tr>39
<tr>40
<td >Gesamtpreis:<br>(zzgl. MwSt)</td>41
<td class='summe'>75,00€</td>42
</tr>43
<tr>44
<td >Jährlich<br></td>45
<td class='rabatt'></td>46
</tr>47
</table>48
</div>49
<script src="./app.js"></script>50
</body>51
</html>