Jump to content

[SOLVED] Changing div backgrounds on radiobutton select

Darkmatter5

By Darkmatter5
in Javascript Help

Recommended Posts

Darkmatter5 Advanced Member

Darkmatter5

Posted
Posted

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 Newbie

rhodesa

Posted
Posted

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>

Psycho Prolific Member

Psycho

Posted
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.