Improve this javascript code: It displays hidden text and highlights the selected page number This code (http://jsbin.com/isexez/5/edit) functions as expected:
(1) it displays the page selected; and
(2) it highlights the number of the selected page.

I would appreciate help in improving it.  

I am in the process of writing an ebook (http://www.keepcount.net/ebook/01-09/02_tricks.html) and need to improve this code before I get back to my writing.

*  Here's my jQuery code as suggested by @Gisborne *
See also  jsbin.com/iduxol/2/edit

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- Need to add http: to link in following line --&gt;
&lt;script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; --&gt;

&lt;meta charset=utf-8 /&gt;
&lt;title&gt;JS Bin&lt;/title&gt;

&lt;style&gt;
.nodisp {  display:none;  } 
.highlight { background:yellow; }
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!-- When page numbers (p1 &amp; p2) are clicked, page's text is displayed and page number remains highlighted --&gt;
&lt;span class="pageNumbers"&gt;
&lt;a id="1"&gt; p1 &lt;/a&gt;
&lt;a id="2"&gt; p2 &lt;/a&gt;
&lt;/span&gt;

&lt;!-- Show page 1 initially --&gt;  
&lt;div id="pg1" class="page"&gt;
   text on page 1
&lt;/div&gt;

&lt;!-- Hide page 2 initially  --&gt;
&lt;div id="pg2" class="page nodisp"&gt;
   quiz on page 2
&lt;/div&gt;

&lt;script&gt;
  $("span.pageNumbers a").click(function () {

  // Remove all highlighting
    $("span.pageNumbers a").removeClass("highlight");

  // Add highlighting to clicked page number
    $(this).addClass("highlight");

  // Hide all text
    $("div.page").hide();

  // Show text corresponding to clicked page number
    $("#pg"+ $(this).attr('id')).show();

  });

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Here are some ideas:


Use either tab or, preferably, 4-spaces for indention consistently. Right now the indention is all screwy on JSBin.
Put all your variable declarations at the top, even if you don't define them yet. This'll prevent any confusion from variable hoisting.
Since null is a falsy value, you can change document.getElementById(...) !== null to document.getElementById(...) to check for the existence of an element in you if statements.
Space out your if statements (so if (...) instead of if(...).)
Maybe think about using jQuery? It'll make working with events and elements much easier than using the DOM directly. So for example, hiding all the pages could be written as easy as: $('div').hide().


That's all I have time for now!