Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to show/hide element in js

byMR
July 27, 2022
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.

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading