title: how to change the grayscale of an image with javascript in the "current page"?
body: <p>This question is concerned about the usage of javascript to chnage the grayscale of the image in the "<code>current link</code>" in navigation.</p>
  
  <p>In the following navigation bar, there are four squares with the corresponding colors. Their grayscale is supposed to change when hover, focus and active and also, the grayscale of the current page should change and I have tried to do it with the js graying function to <em>show which page we are in</em>. But the the java script code is not working and only the first page changes its grayscale by the js code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var current = document.getElementById('default');
  
  function graying(el) {
    if (current != null) {
      current.className = "";
    }
    el.className = "graying";
    current = el;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav {
    width: 100px;
    list-style: none;
    margin: 100px auto;
  }
  #nav img:active,
  #nav img:focus,
  #nav img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: gray;
    -webkit-transition: all .5s ease;
  }
  #nav img.graying {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray;
    -webkit-transition: all .5s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="nav"&gt;
    &lt;li&gt;
      &lt;a href="blue.html"&gt;
        &lt;img id="default" class="graying" onclick="graying(this);" src="images/red.png"&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="green.html"&gt;
        &lt;img onclick="graying(this);" src="images/green.png"&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="red.html"&gt;
        &lt;img onclick="graying(this);" src="images/blue.png"&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="yellow.html"&gt;
        &lt;img onclick="graying(this);" src="images/yellow.png"&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>. Is it correct to use "onclick" in this case?</p>
  
  <p>Any help is appreciated.</p>