Greetings SitePoint community,
<li><label class="br_1" for="b1"><input type="radio" checked="checked" id="b1" name="inner_border" value="1" /></label></li>
<li><label class="br_2" for="b2"><input type="radio" id="b2" name="inner_border" value="2" /></label></li>
<li><label class="br_3" for="b3"><input type="radio" id="b3" name="inner_border" value="3" /></label></li>
<li><label class="br_4" for="b4"><input type="radio" id="b4" name="inner_border" value="4" /></label></li>
<li><label class="br_5" for="b5"><input type="radio" id="b5" name="inner_border" value="5" /></label></li>
<div class="br_1" id="inner_frame">
<a href=""><img src="/images/designer/e.png" /></a>
<a href=""><img src="/images/designer/f.png" /></a>
var div = document.getElementById('inner_border');
if (div != null)
var radios = div.getElementsByTagName('input');
if (radios.length > 0)
for (var i = 0; i < radios.length; i++)
Core.addEventListener(radios[i], "change", FormValidation.innerBorderListener);
var label = this.parentNode;
var setClass = label.getAttribute('class');
var div = document.getElementById('inner_frame');
if (div.className != '')
Here is what I would like to happen. Every time when
a person selects one of the radio buttons (those that sit
fetch the value of class attribute of its containing label element
and add a class of the same name to div#inner_frame
to all option elements.
- References parent label element.
- Store its class name
- References div element that needs to be added
a new class.
- Checks if div already has any class name set and
if so, removes that class.
- Adds a new class name, the same as the class name
set for label element that contains a option element
I know, I am not good at JS and I am sure this
simple functionality can be done in just a few lines
The problem is: all works as I expect it to work, but
IE. I think I have IE8 (if that matters). In IE, the class is added only when I move from one option to another. It should be like this. I click on option A. The class should change. But instead, I click on A, nothing happens. Then I move from A to B and only then the class is changed.
Can someone please help me? This should be a basic thing, I guess. Thanks so much and let me know if you need more clarifications. English is not my native language.
Should you instead use the click event instead of the change event?
Paul, thank you so much for your help. Yep, that works wonders!!! Thank you!
This topic is now closed. New replies are no longer allowed.