[SOLVED] Changing div backgrounds on radiobutton select

Darkmatter5 · January 29, 2009

I have 3 divs that contain a radio button each and when selected they run some JavaScript, but the JavaScript isn't working. I'm wanting the div the radio button is is to change colors, so essentially highlight that div/radio button. Here's the code.

<style type="text/css">
#step1, #step2, #step3 {
    position: absolute;
    top: 0;
    left: 400px;
    width: 440px;
    height: 375px;
    display: none;
    /*padding: 5px;*/
    background-color : #CCCC66;
}
#opt_but1, #opt_but2, #opt_but3 {
    /*background-color: #CCCC66;*/
}
#steps {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 375px;
    /*background-color: gray;*/
    /*border-bottom: 1px dashed;*/
}
</style>
<script type="text/JavaScript">
function togdiv(thediv,thisdiv) {
    document.getElementById("step1").style.display="none";
    document.getElementById("step2").style.display="none";
    document.getElementById("step3").style.display="none";
    //document.getElementById("opt_but1").style.backgroundcolor="#FFFFFF";
    //document.getElementById("opt_but2").style.backgroundcolor="#FFFFFF";
    //document.getElementById("opt_but3").style.backgroundcolor="#FFFFFF";
    document.getElementById(thediv).style.display="block";
    document.getElementById(thisdiv).style.backgroundColor="#CCCC66";
}
</script>
<div id="steps"> </div>
<div id="opt_but1"><input type="radio" name="toggledivs" onclick="togdiv('step1',this);">Optional step 1: (description & notes)</div>
<div id="opt_but2"><input type="radio" name="toggledivs" onclick="togdiv('step2',this);">Optional step 2: (systems, publishers & developers)</div>
<div id="opt_but3"><input type="radio" name="toggledivs" onclick="togdiv('step3',this);">Optional step 3: (UPCs)</div>
<div id="step1">step1</div>
<div id="step2">step1</div>
<div id="step3">step1</div>

Any help is greatly appreciated!

rhodesa · January 29, 2009

you were oh so close:

<style type="text/css">
#step1, #step2, #step3 {
    position: absolute;
    top: 0;
    left: 400px;
    width: 440px;
    height: 375px;
    display: none;
    /*padding: 5px;*/
    background-color : #CCCC66;
}
#opt_but1, #opt_but2, #opt_but3 {
    /*background-color: #CCCC66;*/
}
#steps {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 375px;
    /*background-color: gray;*/
    /*border-bottom: 1px dashed;*/
}
</style>
<script type="text/JavaScript">
function togdiv(thediv,thisdiv) {
    document.getElementById("step1").style.display="none";
    document.getElementById("step2").style.display="none";
    document.getElementById("step3").style.display="none";
    document.getElementById("opt_but1").style.backgroundColor="#FFFFFF";
    document.getElementById("opt_but2").style.backgroundColor="#FFFFFF";
    document.getElementById("opt_but3").style.backgroundColor="#FFFFFF";
    document.getElementById(thediv).style.display="block";
    thisdiv.parentNode.style.backgroundColor="#CCCC66";
}
</script>
<!-- div id="steps"> </div -->
<div id="opt_but1"><input type="radio" name="toggledivs" onclick="togdiv('step1',this);">Optional step 1: (description & notes)</div>
<div id="opt_but2"><input type="radio" name="toggledivs" onclick="togdiv('step2',this);">Optional step 2: (systems, publishers & developers)</div>
<div id="opt_but3"><input type="radio" name="toggledivs" onclick="togdiv('step3',this);">Optional step 3: (UPCs)</div>
<div id="step1">step1</div>
<div id="step2">step2</div>
<div id="step3">step3</div>

Darkmatter5 · January 29, 2009

ARGG, well I'm starting to catch on.

Psycho · January 29, 2009

If I may, this would be more flexible. With this function, you can add/remove options without having to modify the function (note there is also an ID parameter added to the radio button options).

<html>
<head>
<style type="text/css">
#step1, #step2, #step3 {
    position: absolute;
    top: 0;
    left: 400px;
    width: 440px;
    height: 375px;
    display: none;
    /*padding: 5px;*/
    background-color : #CCCC66;
}
#opt_but1, #opt_but2, #opt_but3 {
    /*background-color: #CCCC66;*/
}
#steps {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 375px;
    /*background-color: gray;*/
    /*border-bottom: 1px dashed;*/
}
</style>
<script type="text/JavaScript">
function togdiv(radiodiv)
{
    //Get the numeric portion of the radio button div id
    var ID = radiodiv.id.substr(;

    var i=1;
    while(document.getElementById('step'+i))
    {
        document.getElementById('step'+i).style.display = (ID==i) ? 'block' : 'none';
        document.getElementById('radioOpt'+i).style.backgroundColor = (ID==i) ? '#CCCC66' : '#FFFFFF';
        i++;
    }
    return;
}
</script>
</head>
<body>
<div id="steps"> </div>
<div id="opt_but1"><input type="radio" name="toggledivs" id="radioOpt1" onclick="togdiv(this);">Optional step 1: (description & notes)</div>
<div id="opt_but2"><input type="radio" name="toggledivs" id="radioOpt2" onclick="togdiv(this);">Optional step 2: (systems, publishers & developers)</div>
<div id="opt_but3"><input type="radio" name="toggledivs" id="radioOpt3" onclick="togdiv(this);">Optional step 3: (UPCs)</div>
<div id="step1">step1</div>
<div id="step2">step2</div>
<div id="step3">step3</div>
</body>
</html>

YOu could remove the divs around the radio buttons if those are not needed for other purposes.

Sign In

[SOLVED] Changing div backgrounds on radiobutton select

Recommended Posts

Darkmatter5

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information