Changing color of form html with Javascript

Question

I have some custom HTML and CSS added to a form module I've created. It looks fine; the css is styling it correctly with a drupal_add_css() stylesheet. But I also want to add some Javascript using drupal_add_js() so that when a user is on the first page of the form it changes the text color in the HTML I set up. But I can't get it to work!

Here's the Javascript in step-one.js:

document.getElementById("step-one").style.color = "#769EDD";

Here's the code it will be changing:

    $form['progress bar'] = array(
        '#title' => t('Module Tool'),
        '#prefix' => '<div class="progress-bar" id="progress-bar">
<span id="step-one">Experience Level</span> <span id="arrow1"> > </span>
<span id="step-two">Primary Role</span> <span id="arrow2"> > </span> 
<span id="step-three">Topics of Interest</span> <span id="arrow3"> > </span> 
<span id="recommendations">Recommendations</span></div>',
    );

And I'm trying to add the javascript call ABOVE the previous code, right after I do the drupal_add_css() call (which works). Note that this is all within my module_form() function. Here's the relevant code:

function modulename_form($form, &$form_state) {
      drupal_add_css(drupal_get_path('module', 'modulename') .'/modulename.css');
      drupal_add_js(drupal_get_path('module', 'modulename') .'/step-one.js');
      // more code around building the form itself...until eventually 
      I get to my $form['progress bar'] = array( // see code above.

Any ideas why this might not be working?

Answer 1

You can try like this (thats's step-one.js file):

(function ($) {
  Drupal.behaviors.yourModule = {
    attach: function (context, settings) {
      $('#step-one').css('color', '#769edd');
    }
  };
})(jQuery);