SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Pros Please Help (should be easy for you)

    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.

    HTML Code:
    <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>
    Code:
    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AlexKravchenko View Post
    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.
    Should you instead use the click event instead of the change event?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •