Home/ Questions/Q 1928164
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T06:56:43+00:00

I’m working on some custom Javascript for a CMS template at work. I want

  • 0

I’m working on some custom Javascript for a CMS template at work. I want to be able to make a certain <li> element on the page receive the class of “current” for that page only. So in the global page head I have something like this:

<script type="text/javascript">
    function makeCurrent(id) {
      var current = document.getElementById(id);
      current.setAttribute("class", "current"); // for most browsers
      current.setAttribute("className", "current"); // for ie
    }
</script>

Then in each individual page <head>, I have something like this:

<script type="text/javascript">makeCurrent("undergraduate")</script>

On the page I have a nav <ul>, with something like:

<li id="undergraduate"><a href="...">Undergraduate Program</a></li>
<li id="graduate"><a href="...">Graduate Program</a></li>

etc.

When I load the page, the class is not applied. When I look in the Firebug console, it gives the error message:

current is null
(x)  current.setAttribute("class", "current");

I’m still getting the hang of writing solid, raw javascript (learning backwards after jQuery, you know how it goes), but I want to write it in just JS. What idiotic newbie mistake am I making?

Thanks everyone!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The element does not exist yet when that script is being evaluated. Put it in the body’s onload handler or something instead, so it executes once the DOM is in place.

    An example of how to do this without touching any markup:

    function callWhenLoaded(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", func);
  }
}

callWhenLoaded(function() { makeCurrent("undergraduate"); });
    • 0