I'm sure there is a way to write a shorter version of the following js code. In the end I'm just repeating myself over and over again. Any suggestions?
Thanks a lot!
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 1) {
design01yellow.style.display = "none";
design01black.style.display = "block";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 2) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "block";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if
///AND SO ON
Give all the elements a common class (e.g. class="design"). Loop over them, setting them all to none, then set the specific element to block.
document.querySelectorAll(".design").forEach(el => el.style.display = "none");
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
} else if (designVal == 0 && colorVal == 1) {
design01black.style.display = "block";
} ...
I'd normalize them to 'display: none' and then only set the one you want to display: block.
if (designVal === 0) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
if(colorVal === 0) {
design01yellow.style.display = "block";
} else if (colorVal === 1) {
design01black.style.display = "block";
} else if (colorVal === 2) {
design01blue.style.display = "block";
}
// and so on
}