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?

  • 1. Have you checked in browser inspector if step-one.js is loaded correctly?
    – zaporylie
    Jan 29, 2015 at 9:30
  • You should probably attach files anyway... drupal.stackexchange.com/questions/70015/…
    – Alex Gill
    Jan 29, 2015 at 14:41
  • @zaporylie yes, it's showing as loaded in the <head> area.
    – Sage
    Jan 29, 2015 at 22:32
  • Than it is not a Drupal problem but Javascript :) Try write it in jQuery notation: jQuery('#step-one').css('color', '#769edd');
    – zaporylie
    Jan 30, 2015 at 11:11

1 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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.