Question

I have the following HTML generated by Drupal

<fieldset id="webform-component-lunchset" class="webform-component-fieldset form-wrapper" style="">
    <div id="webform-component-lunchset--lunch" class="form-item webform-component webform-component-radios webform-container-inline" style="">
        ...Radio Button div tags here
    </div>
</fieldset>
<fieldset id="webform-component-dinnerset" class="webform-component-fieldset form-wrapper" style="display: none;">
    <div id="webform-component-dinnerset--dinner" class="form-item webform-component webform-component-radios webform-container-inline" style="display: none;">
        ...Radio Button div tags here
    </div>
</fieldset>

My intent is to allow the user to choose a meal time based on the hour of the day when he initiates a booking. To do this I noticed that I have to change style=”display: none;” for the field set I want to hide and style=”” for the one I want displayed. I have the following Javascript statements to change the style attribute of the DIV tags but it doesn’t seem to work. Any help would be appreciated.

window.onload = (function() { 
    var today = new Date();
    var day = today.getDay();
    var hour = today.getHours();
    var lunchtime1 = document.getElementById('webform-component-lunchset');
    var lunchtime2 = document.getElementById('webform-component-lunchset--lunch');
    var dinnertime1 = document.getElementById('webform-component-dinnerset');
    var dinnertime2 = document.getElementById('webform-component-dinnerset--dinner');
    if (hour >= 15 && hour < 22) {
        lunchtime1.style="display: none;";
        lunchtime2.style="display: none;";
        dinnertime1.style=" ";
        dinnertime2.style=" ";
        sundaytime1.style="display: none;";
    }
});

Not sure why it isn’t working, would appreciate any help. Thank you in advance

Answer 1

When you want to use the style property of a reference to a node, you’re using the DOM API. A DOMElement object has a property, called style, which has to be an object, too. So either write:

lunchtime1.style.display = 'none';

Or use the setAttribute method – so you can set the entire style attribute in one go:

lunchtime1.setAttribute('style','display: block; background-color: #F00;');

That should do the trick…

note:
As Tim Down pointed out, old IE’s don’t do setAttribute as well as decent browsers, so the first approach is the most reliable. I’m looking into the matter. IE doesn’t allow you to write someNode.setAttribute('onclick', 'clickHandler()'); for example.
I’ve also encountered issues that seem to affect only certain elements (often form elements), but when it comes to setting the style attribute, I can’t be sure… Either you can’t set certain attributes, or you might not be able to set any attribute on some elements. Whatever… I’ll update this answer once I know more about this. (currently no windows boxes around, so no IE to test)