CODEWITHSUNDEEP
javascript
programmnoob
programmnoob

Reputation: 71

How to show/hide element in 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 == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  calcSum();
}
function updateBackendUser(val, inputtype) {
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').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 myList = document.getElementById("myList");
  var backendtype = myList.options[myList.selectedIndex].value;
  var paymenttype = annual.options[annual.selectedIndex].value;
  var percent = 1; //Standardvalue for yearly
  if(paymenttype == "M"){
    percent = 1.1; //standardvalue for monthly
  }
  //Preisstaffelung für app und backend
  apppreis = 7.5;
  backendpreis = 35;
  if (backendtype == "ZR") {
    if (backendanzahl < 5) {
      backendpreis = 35 * percent;
    } else if (backendanzahl < 11) {
      backendpreis = 32.50 * percent;
    } else if (backendanzahl < 21) {
      backendpreis = 30 * percent;
    }
  } 

  if(backendtype == "Z"){
    if (backendanzahl < 6) {
      backendpreis = 20 * percent;
    } else if (backendanzahl < 11) {
      backendpreis = 18 * percent;
    } else if (backendanzahl < 21) {
      backendpreis = 16 * percent;
    }
  }

  if(backendtype == "ZR"){
    if (appanzahl < 11) {
      apppreis = 7.5 * percent;
    } else if (appanzahl < 26) {
      apppreis = 7 * percent;
    } else if (appanzahl < 51) {
      apppreis = 6.50 * percent;
    } else if (appanzahl < 76) {
      apppreis = 6 * percent;
    } else if (appanzahl > 76) {
      apppreis = 5.5 * percent;
    }
  }
    if(backendtype == "Z" ){
      if (appanzahl < 11) {
        apppreis = 7.5 * percent;
      } else if (appanzahl < 26) {
        apppreis = 7 * percent;
      } else if (appanzahl < 51) {
        apppreis = 6.50 * percent;
      } else if (appanzahl < 76) {
        apppreis = 6 * percent;
      } else if (appanzahl > 76) {
        apppreis = 5.5 * percent;
      }
    }
   
  
  if (isNaN(proapp2)) proapp2 = 0.00; //turn NaN intro number
  
  
//Rechnungen für gesamtsumme
  var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext+"€";
//Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendstk.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) : "0.00";
  preisproapp.textContent = proapp2;
  
  if(paymenttype == "J"){
    var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis)*12).toFixed(2);
    jährlich.textContent = jährlicherrabatt+"€";
  }else if(paymenttype == "M"){
    checkHide();
  }
}
//Rechnung für Jährlich und Monatlich(10% Rabatt für Jährlich)
  function checkHide(){
    var hidden = document.getElementById('hiddenMonthly');
    hidden.style.visibility = 'hidden';
  }


//Funktion für das Verändern der Farbe wenn der Slider bewegt wird
const appUserRangeColor = document.querySelector('#Appuserrangecolor')
Appuserrangecolor.addEventListener('input', function () {
    // (118-50)/(277-50) = 0,26
  // (this.value - this.min) / (this.max - this.min)
  var percent = ((this.value - this.min) / (this.max - this.min))*100;
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Appuserrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
  )
})

const backendUserRangeColor = document.querySelector('#Backendrangecolor')
Backendrangecolor.addEventListener('input', function () {
  var percent1 = ((this.value - this.min) / (this.max - this.min))*100;
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Backendrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${percent1}%,${bg} ${percent1}%)`
  )
})

const appInput = document.querySelector('#Appuserrangecolor')
AppInput.addEventListener('input', function () {
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Appuserrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${this.value}%,${bg} ${this.value}%) `
  )
})
const backendInput = document.querySelector('#Backendrangecolor')
BackendInput.addEventListener('input', function () {
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Backendrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${this.value}%,${bg} ${this.value}%)`
  )
})
.grid-container {
    display: grid;
  grid-template-columns:600px 250px ;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}
.grid-item-1 {
  align-self: start;
  justify-self: center;
}


/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
  font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}

.text-grey{
  color:grey;
}

header{
  text-align: center;
  font-size: 20px;
}


*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
  
}
.td, tr, th{
  font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}
#Backendrangecolor, #Appuserrangecolor {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}
#BackendInput, #AppInput {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}

.grid-item {
  font-size: 15px;
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96,125,139,0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}
.target { display: none; }

input[type=range]{
  border-radius: 32px;
  height: 10px;
  cursor: pointer;
}
<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: 270px"class="grid-item">
        <header>Preiskalkulator</header>
        <div class="slidecontainer">
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="Math.abs(this.value); updateAppUser(this.value, 'Appuserrangecolor');" class='appuser update'></input>
          <input style="width: 30px;border-color: var(--form_border_color);" 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="Backendrangecolor" 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, 'Backendrangecolor'); " class='backenduser update'></input>
          <input style="width: 30px;border-color: var(--form_border_color);" 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 > choose software </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();checkHide()" >
          <option onclick="('hidden')" value="J">annual</option>
          <option value="M">monthly</option>
        </select>
      </div>
      <div class="grid-item" style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; width: 138px" >App-Benutzer<br > <div class='text-grey'>pro <span class="proapp" >7,50</span>€</td></div>
            <td style="width: 62px" class='appanzahl'>75,00€</td>
          </tr>
          <tr>
            <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif">Backend-Benutzer<br ><div class='text-grey'>pro <span class='probackend'>35,00</span>€</div></td>
            <td class='backendanzahl'>175,00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
          <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</td></div>
            <td class='summe'>75,00€</td>
          </tr>
          <tr id="hiddenMonthly">
            <td>Total amount<br></td>
            <td class='rabatt'></td>
          </tr>
        </table>
      </div>
      <script src="./app.js"></script>
  </body>
</html>
<!DOCTYPE html>
Im coding this price calculator and want to be able to show/hide elements when selecting something in the dropdown menu. So when selecting monthly under "choose software" the total amount hides on the right side of the price calculator the thing is when selecting yearly i want the total amount to show how would i do this?At the moment when i select monthly it just dissapears and will not show again.

Upvotes: 1

Views: 231

Answers (2)

Mina
Mina

Reputation: 17029

You just need to check conditionally if the select value === M set the visibility value to hidden else set the visibility value to unset.

Or you can use display: none/block

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 == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  calcSum();
}
function updateBackendUser(val, inputtype) {
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').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 myList = document.getElementById("myList");
  var backendtype = myList.options[myList.selectedIndex].value;
  var paymenttype = annual.options[annual.selectedIndex].value;
  var percent = 1; //Standardvalue for yearly
  if(paymenttype == "M"){
    percent = 1.1; //standardvalue for monthly
  }
  //Preisstaffelung für app und backend
  apppreis = 7.5;
  backendpreis = 35;
  if (backendtype == "ZR") {
    if (backendanzahl < 5) {
      backendpreis = 35 * percent;
    } else if (backendanzahl < 11) {
      backendpreis = 32.50 * percent;
    } else if (backendanzahl < 21) {
      backendpreis = 30 * percent;
    }
  } 

  if(backendtype == "Z"){
    if (backendanzahl < 6) {
      backendpreis = 20 * percent;
    } else if (backendanzahl < 11) {
      backendpreis = 18 * percent;
    } else if (backendanzahl < 21) {
      backendpreis = 16 * percent;
    }
  }

  if(backendtype == "ZR"){
    if (appanzahl < 11) {
      apppreis = 7.5 * percent;
    } else if (appanzahl < 26) {
      apppreis = 7 * percent;
    } else if (appanzahl < 51) {
      apppreis = 6.50 * percent;
    } else if (appanzahl < 76) {
      apppreis = 6 * percent;
    } else if (appanzahl > 76) {
      apppreis = 5.5 * percent;
    }
  }
    if(backendtype == "Z" ){
      if (appanzahl < 11) {
        apppreis = 7.5 * percent;
      } else if (appanzahl < 26) {
        apppreis = 7 * percent;
      } else if (appanzahl < 51) {
        apppreis = 6.50 * percent;
      } else if (appanzahl < 76) {
        apppreis = 6 * percent;
      } else if (appanzahl > 76) {
        apppreis = 5.5 * percent;
      }
    }
   
  
  if (isNaN(proapp2)) proapp2 = 0.00; //turn NaN intro number
  
  
//Rechnungen für gesamtsumme
  var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext+"€";
//Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendstk.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) : "0.00";
  preisproapp.textContent = proapp2;
  
  if(paymenttype == "J"){
    var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis)*12).toFixed(2);
    jährlich.textContent = jährlicherrabatt+"€";
  }else if(paymenttype == "M"){
    checkHide();
  }
}
//Rechnung für Jährlich und Monatlich(10% Rabatt für Jährlich)
  function checkHide(element){
    var hidden = document.getElementById('hiddenMonthly');
    if (element && hidden) {
      element.value === 'M' ? (hidden.style.visibility = 'hidden')  : (hidden.style.visibility = 'unset')
    }
  }


//Funktion für das Verändern der Farbe wenn der Slider bewegt wird
const appUserRangeColor = document.querySelector('#Appuserrangecolor')
Appuserrangecolor.addEventListener('input', function () {
    // (118-50)/(277-50) = 0,26
  // (this.value - this.min) / (this.max - this.min)
  var percent = ((this.value - this.min) / (this.max - this.min))*100;
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Appuserrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
  )
})

const backendUserRangeColor = document.querySelector('#Backendrangecolor')
Backendrangecolor.addEventListener('input', function () {
  var percent1 = ((this.value - this.min) / (this.max - this.min))*100;
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Backendrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${percent1}%,${bg} ${percent1}%)`
  )
})

const appInput = document.querySelector('#Appuserrangecolor')
AppInput.addEventListener('input', function () {
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Appuserrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${this.value}%,${bg} ${this.value}%) `
  )
})
const backendInput = document.querySelector('#Backendrangecolor')
BackendInput.addEventListener('input', function () {
  const bg = getComputedStyle(this).getPropertyValue('--background');
  const slider = getComputedStyle(this).getPropertyValue('--slider');
  Backendrangecolor.setAttribute(
      'style',
          ` background:linear-gradient(to right,${slider},${slider} ${this.value}%,${bg} ${this.value}%)`
  )
})
.grid-container {
    display: grid;
  grid-template-columns:600px 250px ;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}
.grid-item-1 {
  align-self: start;
  justify-self: center;
}


/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
  font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}

.text-grey{
  color:grey;
}

header{
  text-align: center;
  font-size: 20px;
}


*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
  
}
.td, tr, th{
  font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}
#Backendrangecolor, #Appuserrangecolor {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}
#BackendInput, #AppInput {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}

.grid-item {
  font-size: 15px;
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96,125,139,0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}
.target { display: none; }

input[type=range]{
  border-radius: 32px;
  height: 10px;
  cursor: pointer;
}
<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: 270px"class="grid-item">
        <header>Preiskalkulator</header>
        <div class="slidecontainer">
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="Math.abs(this.value); updateAppUser(this.value, 'Appuserrangecolor');" class='appuser update'></input>
          <input style="width: 30px;border-color: var(--form_border_color);" 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="Backendrangecolor" 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, 'Backendrangecolor'); " class='backenduser update'></input>
          <input style="width: 30px;border-color: var(--form_border_color);" 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 > choose software </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();checkHide(this)" >
          <option onclick="('hidden')" value="J">annual</option>
          <option value="M">monthly</option>
        </select>
      </div>
      <div class="grid-item" style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; width: 138px" >App-Benutzer<br > <div class='text-grey'>pro <span class="proapp" >7,50</span>€</td></div>
            <td style="width: 62px" class='appanzahl'>75,00€</td>
          </tr>
          <tr>
            <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif">Backend-Benutzer<br ><div class='text-grey'>pro <span class='probackend'>35,00</span>€</div></td>
            <td class='backendanzahl'>175,00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
          <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</td></div>
            <td class='summe'>75,00€</td>
          </tr>
          <tr id="hiddenMonthly">
            <td>Total amount<br></td>
            <td class='rabatt'></td>
          </tr>
        </table>
      </div>
      <script src="./app.js"></script>
  </body>
</html>
<!DOCTYPE html>

Upvotes: 0

bubu
bubu

Reputation: 11

document.getElementById('hiddenMonthly').style.display = "none";

Upvotes: 1

Related Questions