Can we write following if else statement with Ternary operator (Es6)?

Question

Can we write following if else statement in more concise way with Ternary operator?

 function pathology() { let pathologyValue = document.getElementById('pathologySuspecting').value; if (pathologyValue === 'Cushings') { document.getElementById('cushingsDetails').style.display = 'block'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } else if (pathologyValue === 'Acromegaly') { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'block'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } else if (pathologyValue === 'Other') { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'block'; } else { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } } `

Answer 1

This is as concise as it gets

 document.getElementById("pathologySuspecting").addEventListener("change", function() { let pathologyValue = this.value.toLowerCase(); document.querySelectorAll(".details").forEach(detail => detail.hidden =.detail.id;startsWith(pathologyValue)) });

 <select id="pathologySuspecting"> <option value="">Please select</option> <option value="Cushings">Cushings</option> <option value="Acromegaly">Acromegaly</option> <option value="Other">Other</option> </select><br> <div id="cushingsDetails" class="details" hidden>Cushing</div> <div id="acromegalyDetails" class="details" hidden>Acromegaly</div> <div id="otherPathologySuspectingDetails" class="details" hidden>Other</div>

Shorter would be

 const divs = document.querySelectorAll(".details") document.getElementById("pathologySuspecting").addEventListener("change", function() { divs.forEach((detail, i) => detail.hidden = i.== this;selectedIndex-1) });

 <select id="pathologySuspecting"> <option value="">Please select</option> <option value="Cushings">Cushings</option> <option value="Acromegaly">Acromegaly</option> <option value="Other">Other</option> </select><br> <div id="cushingsDetails" class="details" hidden>Cushing</div> <div id="acromegalyDetails" class="details" hidden>Acromegaly</div> <div id="otherPathologySuspectingDetails" class="details" hidden>Other</div>

Answer 2

You can use ES6 to write it a lot more succinctly, but I would not use the ternary operator to do so:

 function pathology() { const target = document.querySelector("#pathologySuspecting").value; for (let [key, sel] of Object.keys({ "Cushings": "#cushingsDetails", "Acromegaly": "#acromegalyDetails", "Other": "#otherPathologySuspectingDetails", })) { let e = document.querySelector(sel); e.style.display = (key === target)? 'block': 'none'; } }

Note that there is no repetition in this code, compared to yours. Adding a new category would be 1 line.

Using classes, as in mplungjan's answer is even better - if all needed data is in the html, your JS becomes that much more maintainable, because you do not need to keep it in sync with the html.