change what is displayed in pop up when changing option-CodePudding

So this is a price calucaltor when clicking "info" it will display the prices but when selecting monthly i want all the prices displayed to cost 20% more.So how would i change my function so it applies that 20% when clicking monthly and when clicking annual i want the price to stay the same.What do i need to do?

var percent = 1; //Standardvalue for yearly

  
apppreis = 7.5;
backendpreis = 35;
//Preisstaffelung Zeiterfassung Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };


document.addEventListener("DOMContentLoaded", function (event) {

  var updatecolor = document.querySelectorAll('.updatecolor');

  document.querySelectorAll(".updatecolor").forEach(updateinputs =>
    updateinputs.addEventListener("input", function () {
      var percent = calcPercent(this.value, this.min, this.max);
      const bg = getComputedStyle(this).getPropertyValue('--background');
      const slider = getComputedStyle(this).getPropertyValue('--slider');
      var colorchanger = this.getAttribute('rangecolorid');
      var sliderselect = document.querySelector('#'   colorchanger);
      sliderselect.setAttribute(
        'style',
        ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
      )
    })
  );

  //Preisstaffeln anzeigen
  printPreisstaffel(pricingapp, "preisstaffelapp");

  //Initiale Anzeige der Daten
  calcSum();
  //Initiale Anzeige für Backend Preisstaffel
  updatePreisStaffelungBackend();

});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML  = `<div ><span >Bis ${key} Benutzer:</span> <span >${(preisstaffel[key]).toFixed(2)}€ </span></div>`;
    
  }
}

//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
  if (inputtype == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').value = val;
  }
  calcSum();
}


function calcPercent(curval, min, max) {
  return ((curval - min) / (max - min)) * 100;
}

function updatePreisStaffelungBackend() {
  var backendtype = document.querySelector("#backendfunktion").value;
  if (backendtype == "ZR"){
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }else{
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }  

}


function calcSum() {
  var preisproapp = document.querySelector('.proapp');
  var backendpreissum = document.querySelector('.backendpreissum');
  var appstk = document.querySelector('.appanzahl');
  var preisprobackend = document.querySelector('.probackend');
  var jaehrlich = document.querySelector('.jaehrlichsum');
  var summetext = document.querySelector('.summe');
  var rabatt = document.querySelector('.rabattsum');
  var backendanzahl = document.querySelector(".backenduser").value;
  var appanzahl = document.querySelector(".appuser").value;
  var paymenttype = document.querySelector("#zahlrythmus").value;
  var backendtype = document.querySelector("#backendfunktion").value;

  if (paymenttype == "M") {
    percent = 1.2; //standardvalue for monthly
  }else{
    percent = 1;   //standardvalue for annual
  }

  //If abfrage für Backend um Preisstaffel anzeigen zu lassen
  if (backendtype == "ZR") {
    backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
  } else {
    backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
  }
  
  apppreis = getPrice(pricingapp, percent, appanzahl);


  var mytext = (((backendanzahl * backendpreis    appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext   "€";
  //Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendpreissum.textContent = backendpreissumme   "€";
  //Rechnung für Apppreissumme
  var apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme   "€";
  //Rechnung für Preis pro Backendbenutzer
  var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;
  //Rechnung für Preis pro App-Benutzer
  var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
  preisproapp.textContent = proapp2;
  //If Abfrage wenn "Jaehrlich" ausgewaehlt wird
  if (paymenttype == "J") {
    var jaehrlicherrabatt = ((backendanzahl * backendpreis    appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt   "€";
  }
  //Rechnung für Ersparnis
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2);
  rabatt.textContent = "-"   rabattsum   "€";

}
//rabatt wird nicht berechnet beim zweiten mal

//Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element) {
  var hidden = document.getElementById('hiddenMonthly');
  if (element && hidden) {
    element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
  }
}
//funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    //If key is higher than the selected amount, return the value
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
}

.popover__title {
  font-size: 24px;
  color: rgb(73, 228, 68);
}

.popover__wrapper {
  position: relative;
  display: inline-block;
}

.popover__content {
  line-height: 15px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -80px;
  transform: translate(0, 10px);
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 170px;
  border-color: rgba(96, 125, 139, 0.33);
  border-width: 4px;
  border-style: solid;
}

.popover__content:before {
  position: absolute;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f8f8f8 transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}

.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover__message {
  text-align: center;
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <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 style="width: 270px">
        <header>Preiskalkulator</header>
        <div >
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
        <div><b>Bürosoftware wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "backendfunktion" onchange = "calcSum();updatePreisStaffelungBackend()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung   Rechnungswesen</option>
        </select>
        <div><b>Option wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
          <option onclick="('hidden')" value="J">annual</option>
          <option value="M">monthly</option>
        </select>
      </div>
      <div  style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div >
                  <p  style="font-size:12px;">Preisstaffelung-App</p>
                  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <br > <div class='text-grey'>pro <span  >7.50</span>€</div></td>
            <td style="width: 62px; vertical-align: top;" class='appanzahl'>0.00€</td>
          </tr>
          <tr>
            <td>Bürosoftware-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div  style="  display: inline-block;">
                  <p  style="font-size:12px;">Preisstaffelung-Büro</p>
                  <div id='preisstaffelbackend' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              
              <br ><div class='text-grey'>pro <span class='probackend'>20.00</span>€</div></td>
            <td class='backendpreissum' style="vertical-align: top;">20.00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
            <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</div></td>
            <td class='summe' style="vertical-align: top;">20.00€</td>
          </tr>
          <table id="hiddenMonthly" style="width:100%;text-align: right;">
            <tr>
              <td>Jährlich<br></td>
              <td class='jaehrlichsum' >240.00€</td>
            </tr>
            <tr class='text-grey'>
              <td>(inkl.20%)Rabatt<br></td>
              <td class='rabattsum'>0.00€</td>
            </tr>
          </table>
        </table>
        <div >
          <button ><a  target="blank" href="https://solutions.stressfrei.de/">Anfrage</a></button>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Fixed it by updating your printPreisstaffel function

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  
  for (var key in preisstaffel) {
    var paymenttype = document.querySelector("#zahlrythmus").value;
    if(paymenttype == "M"){
      var price = (preisstaffel[key] / 100 * 120).toFixed(2);
    }
    else{
      var price = preisstaffel[key].toFixed(2);
    }
    document.getElementById(idelement).innerHTML  = `<div ><span >Bis ${key} Benutzer:</span> <span >${price}€ </span></div>`;
  }
}

Added to your calcSum function

//Preisstaffeln anzeigen
  printPreisstaffel(pricingapp, "preisstaffelapp");
  if (backendtype == "ZR"){
     printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }else{
     printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }

var percent = 1; //Standardvalue for yearly

  
apppreis = 7.5;
backendpreis = 35;
//Preisstaffelung Zeiterfassung Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };


document.addEventListener("DOMContentLoaded", function (event) {

  var updatecolor = document.querySelectorAll('.updatecolor');

  document.querySelectorAll(".updatecolor").forEach(updateinputs =>
    updateinputs.addEventListener("input", function () {
      var percent = calcPercent(this.value, this.min, this.max);
      const bg = getComputedStyle(this).getPropertyValue('--background');
      const slider = getComputedStyle(this).getPropertyValue('--slider');
      var colorchanger = this.getAttribute('rangecolorid');
      var sliderselect = document.querySelector('#'   colorchanger);
      sliderselect.setAttribute(
        'style',
        ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
      )
    })
  );

  //Preisstaffeln anzeigen
  printPreisstaffel(pricingapp, "preisstaffelapp");

  //Initiale Anzeige der Daten
  calcSum();
  //Initiale Anzeige für Backend Preisstaffel
  updatePreisStaffelungBackend();

});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  
  
  for (var key in preisstaffel) {
    
    var paymenttype = document.querySelector("#zahlrythmus").value;
    if(paymenttype == "M"){
      var price = (preisstaffel[key] / 100 * 120).toFixed(2);
    }
    else{
      var price = preisstaffel[key].toFixed(2);
    }
    
    document.getElementById(idelement).innerHTML  = `<div ><span >Bis ${key} Benutzer:</span> <span >${price}€ </span></div>`;
    
  }
}

//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
  if (inputtype == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').value = val;
  }
  calcSum();
}


function calcPercent(curval, min, max) {
  return ((curval - min) / (max - min)) * 100;
}

function updatePreisStaffelungBackend() {
  var backendtype = document.querySelector("#backendfunktion").value;
  if (backendtype == "ZR"){
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }else{
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }  

}


function calcSum() {
  var preisproapp = document.querySelector('.proapp');
  var backendpreissum = document.querySelector('.backendpreissum');
  var appstk = document.querySelector('.appanzahl');
  var preisprobackend = document.querySelector('.probackend');
  var jaehrlich = document.querySelector('.jaehrlichsum');
  var summetext = document.querySelector('.summe');
  var rabatt = document.querySelector('.rabattsum');
  var backendanzahl = document.querySelector(".backenduser").value;
  var appanzahl = document.querySelector(".appuser").value;
  var paymenttype = document.querySelector("#zahlrythmus").value;
  var backendtype = document.querySelector("#backendfunktion").value;

  if (paymenttype == "M") {
    percent = 1.2; //standardvalue for monthly
  }else{
    percent = 1;   //standardvalue for annual
  }

  //If abfrage für Backend um Preisstaffel anzeigen zu lassen
  if (backendtype == "ZR") {
    backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
  } else {
    backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
  }
  
  apppreis = getPrice(pricingapp, percent, appanzahl);
  //Preisstaffeln anzeigen
  printPreisstaffel(pricingapp, "preisstaffelapp");
  if (backendtype == "ZR"){
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }else{
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }  


  var mytext = (((backendanzahl * backendpreis    appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext   "€";
  //Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendpreissum.textContent = backendpreissumme   "€";
  //Rechnung für Apppreissumme
  var apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme   "€";
  //Rechnung für Preis pro Backendbenutzer
  var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;
  //Rechnung für Preis pro App-Benutzer
  var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
  preisproapp.textContent = proapp2;
  //If Abfrage wenn "Jaehrlich" ausgewaehlt wird
  if (paymenttype == "J") {
    var jaehrlicherrabatt = ((backendanzahl * backendpreis    appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt   "€";
  }
  //Rechnung für Ersparnis
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2);
  rabatt.textContent = "-"   rabattsum   "€";

}
//rabatt wird nicht berechnet beim zweiten mal

//Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element) {
  var hidden = document.getElementById('hiddenMonthly');
  if (element && hidden) {
    element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
  }
}
//funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    //If key is higher than the selected amount, return the value
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
}

.popover__title {
  font-size: 24px;
  color: rgb(73, 228, 68);
}

.popover__wrapper {
  position: relative;
  display: inline-block;
}

.popover__content {
  line-height: 15px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -80px;
  transform: translate(0, 10px);
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 170px;
  border-color: rgba(96, 125, 139, 0.33);
  border-width: 4px;
  border-style: solid;
}

.popover__content:before {
  position: absolute;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f8f8f8 transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}

.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover__message {
  text-align: center;
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <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 style="width: 270px">
        <header>Preiskalkulator</header>
        <div >
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
        <div><b>Bürosoftware wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "backendfunktion" onchange = "calcSum();updatePreisStaffelungBackend()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung   Rechnungswesen</option>
        </select>
        <div><b>Option wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
          <option onclick="('hidden')" value="J">annual</option>
          <option value="M">monthly</option>
        </select>
      </div>
      <div  style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div >
                  <p  style="font-size:12px;">Preisstaffelung-App</p>
                  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <br > <div class='text-grey'>pro <span  >7.50</span>€</div></td>
            <td style="width: 62px; vertical-align: top;" class='appanzahl'>0.00€</td>
          </tr>
          <tr>
            <td>Bürosoftware-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div  style="  display: inline-block;">
                  <p  style="font-size:12px;">Preisstaffelung-Büro</p>
                  <div id='preisstaffelbackend' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              
              <br ><div class='text-grey'>pro <span class='probackend'>20.00</span>€</div></td>
            <td class='backendpreissum' style="vertical-align: top;">20.00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
            <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</div></td>
            <td class='summe' style="vertical-align: top;">20.00€</td>
          </tr>
          <table id="hiddenMonthly" style="width:100%;text-align: right;">
            <tr>
              <td>Jährlich<br></td>
              <td class='jaehrlichsum' >240.00€</td>
            </tr>
            <tr class='text-grey'>
              <td>(inkl.20%)Rabatt<br></td>
              <td class='rabattsum'>0.00€</td>
            </tr>
          </table>
        </table>
        <div >
          <button ><a  target="blank" href="https://solutions.stressfrei.de/">Anfrage</a></button>
        </div>
      </div>
    </div>
  </body>
</html>