My task involves creating a large form where elements initially have an opacity of 0.5, and when a button is clicked, the opacity changes to 1.0. While I can achieve this using JavaScript, I want to find a more efficient way by avoiding individual if statements for each element. Additionally, some elements may need to toggle the opacity of multiple other elements.
SIMPLE CSS
[id^="dp"] {
opacity: 0.5;
}
HTML
GROUP 1<BR>
<input type="radio" id="abc1" name="abc1" onclick="showabc();"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1" onclick="showabc();"/>
<label for="abc2"> No </label>
<div id="dpabc1">
<H4>Content 1 is dimmed</H4>
</div>
GROUP 2<BR>
<input type="radio" id="abc3" name="abc2" onclick="showabc();"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" onclick="showabc();"/>
<label for="abc4"> No </label>
<div id="dpabc7">
<H4>Content 2 is dimmed</H4>
</div>
GROUP 3<BR>
<input type="radio" id="abc5" name="abc3" onclick="showabc();"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" onclick="showabc();"/>
<label for="abc6"> No </label>
<div id="dpabc9">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11">
<H4>Content 3 item2 in its own div</H4>
CURRENT JAVASCRIPT I NEED TO REWRITE WITHOUT A BUNCH OF IF STATEMENTS FOR EACH ELEMENT
function showabc() {
if (document.getElementById("abc1").checked == true) {
document.getElementById("dpabc1").style.opacity = 1.0;
}
else {
document.getElementById("dpabc1").style.opacity = 0.5;
}
if (document.getElementById("abc3").checked == true) {
document.getElementById("dpabc7").style.opacity = 1.0;
}
else {
document.getElementById("dpabc7").style.opacity = 0.5;
}
if (document.getElementById("abc5").checked == true) {
document.getElementById("dpabc9").style.opacity = 1.0;
document.getElementById("dpabc11").style.opacity = 1.0;
}
else {
document.getElementById("dpabc9").style.opacity = 0.5;
document.getElementById("dpabc11").style.opacity = 0.5;
}
}
BEGINNING OF CODE REVISION HERE'S WHERE I'M STUCK. What I'm trying to do is match the variables in "checkMe" with the variables in dimMe. You can see abc1 & 3 need to show the opacity change of one item where abc5 needs to change to opacity to two items (dpabc9 & dpabc11).
function showabc() {
var checkMe = ["abc1" , "abc3" , "abc5" ];
var dimMe = ["dpabc1" , "dpabc7" , "dpabc9, dpabc11"];
for (var i=0, l=checkMe.length; i<l; ++i) {
document.getElementById(checkMe[i]).style.opacity = 1.0;
}
else {
document.getElementById(checkMe[i]).style.opacity = 0.5;
}
}