how to make var return 0.00 instead of NaN?-CodePudding

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 >
      <div >
        <header>Preiskalkulator</header>
        <div >
          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  style="width: 250px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer<br> pro <span  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>

CodePudding user response：

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 >
      <div >
        <header>Preiskalkulator</header>
        <div >
          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  style="width: 250px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer<br> pro <span  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>