I want to find the easiest way to convert longer if else condition statement. Can we write following if else statement in more concise way?
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';
}
}
`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>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.