如何在js中顯示/隱藏元素

Question

 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>

我正在編寫這個價格計算器，並希望能夠在下拉菜單中選擇某些內容時顯示/隱藏元素。 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並且不會再次顯示。

Answer 1

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

Answer 2

您只需要有條件地檢查select值 === M是否將可見性值設置為hidden否則將可見性值設置為unset 。

或者你可以使用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>