我正在制作一个价格计算器，但在var proapp2中，当pro应用程序Benutzer滑块为0时，它将显示NaN，我如何使它显示0.00而不是NaN?我尝试如果(isNaN(proapp2)) proapp2 = 0.00;但是没有成功?我做错了什么?我还希望它返回0.00而不是0。我尝试var proapp2 = proapp2 | 0;。
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>这是因为除以零。只需要修改一行，用一个三元运算符来检查你要除以的值是否大于零:
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00";
你也可以去掉这行
if (isNaN(proapp2)) proapp2 = 0.00;
更新如下。
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>