JavaScript Pros Please Help (should be easy for you)

JavaScript
1

Greetings SitePoint community,

I have not been using JavaScript in a very long time, plus I am very, very bad at debugging, especially when it comes to IE. So, please excuse my ignorance and help me out a bit.


<ul>
  <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>
</ul>

<div class="br_1" id="inner_frame">
  <div id="matting_color">
    <a href=""><img src="/images/designer/e.png" /></a>
    <a href=""><img src="/images/designer/f.png" /></a>
  </div>
</div>



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);
    }
  }
}

innerBorderListener: function(event)
{
  var label = this.parentNode;
  var setClass = label.getAttribute('class');
  var div = document.getElementById('inner_frame');
  if (div.className != '')
  {
    Core.removeClass(div, div.className);
  }
  Core.addClass(div, setClass);
}

Here is what I would like to happen. Every time when
a person selects one of the radio buttons (those that sit
inside of labels), I would like JavaScript to
fetch the value of class attribute of its containing label element
and add a class of the same name to div#inner_frame
element.

The first block of JavaScript add event listener (change)
to all option elements.

The second block of JavaScript:

  1. References parent label element.
  2. Store its class name
  3. References div element that needs to be added
    a new class.
  4. Checks if div already has any class name set and
    if so, removes that class.
  5. Adds a new class name, the same as the class name
    set for label element that contains a option element
    in question.

I know, I am not good at JS and I am sure this
simple functionality can be done in just a few lines
of code.

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.

2

Should you instead use the click event instead of the change event?

3

Paul, thank you so much for your help. Yep, that works wonders!!! :slight_smile: Thank you!