applying 10% discount in calculation

Question

At the moment im trying to apply a 10% discount on "apppreis" and "backendpreis" when "jährlich" is selected .Im doing that with the if function problem is i would have to write too many if functions since there is so many options to choose from.Is there any easier way to do this instead of using if.

js:
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;
  var annual = document.getElementById("annual");
  var backendtype = annual.options[annual.selectedIndex].value;
  //Preisstaffelung für app und backend
  apppreis = 7.5;
  
  if(backendtype == "J" ){
  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 annual = document.getElementById("annual");
  var backendtype = annual.options[annual.selectedIndex].value;
  backendpreis = 35;
  if (backendtype == "M") {
    if (backendanzahl < 5) {
      backendpreis = 35 * 1.1;
    } else if (backendanzahl < 11) {
      backendpreis = 32.50 * 1.1;
    } else if (backendanzahl < 21) {
      backendpreis = 30 * 1.1;
    }
  } else {
    if (backendanzahl < 6) {
      backendpreis = 20 * 1.1;
    } else if (backendanzahl < 11) {
      backendpreis = 18 * 1.1;
    } else if (backendanzahl < 21) {
      backendpreis = 16 * 1.1;
    }
  }
  if(backendtype == "M" ){
    if (appanzahl < 11) {
      apppreis = (7.5 * 1.1);
    } else if (appanzahl < 26) {
      apppreis = (7* 1.1);
    } else if (appanzahl < 51) {
      apppreis = (6.50* 1.1);
    } else if (appanzahl < 76) {
      apppreis = (6* 1.1);
    } else if (appanzahl > 76) {
      apppreis = 5.5* 1.1;
    }
  }

}


  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 = 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;
}
html:
<!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 style="width: 250px"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 style="width: 30px" 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 style="width: 30px" 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 style="width: 150px" id = "myList" onchange = "calcSum()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung + Rechnungswesen</option>
        </select>
        <select style="width: 150px" id = "annual" onchange = "calcSum()" >
          <option value="J">Jährlich</option>
          <option value="M">monatlich</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 mtl.:<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>

score 0 · Answer 1 · answered Jul 19 '22 at 13:02

Just create an applyDiscount function and use it when needed.

This is one example.

Given a price and a discount percentage, you will get the discounted price.

function applyDiscount(price, discountPercent) {
  return price - (price / discountPercent);
}

const price = 100;
const discount = 10; // 10%

// Example of 10% discount from price 100
console.log(applyDiscount(price, discount));
// Output: 90

score 0 · Answer 2 · answered Jul 19 '22 at 13:13

To get rid of all the ifs, technically, you can use a Switch Statement, like this:

switch (true) {
  case val < 15:
  ...
  break;
  case val < 56:
  ...
  break;
  //etc...
  case default: //used if the switch doesn't meet any of the other requirements
  ...
}

But tests have found is method is marginally slower that just using ifs.

So, to conclude: If performance matters use ifs. If readability matters, use switch.

applying 10% discount in calculation

2 Answers2