title: JavaScript induced style changes are not permanent
body: <p>Okay, I change the appearance of links using JavaScript. When I change the content of a hard-coded link, it sticks in that the changed color and underlining remains when the cursor is not hovering above it. However, when the content of a DIV has been changed using JavaScript, the style changes do not stick.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Bla bla&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link href="style/kim.css" rel="stylesheet" type="text/css"&gt;
  &lt;script type="text/javascript" src="scripts/Kim.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="main"&gt;
      &lt;div class="nav"&gt;
        &lt;div class="topNav"&gt;
          &lt;ul&gt;
            &lt;li onClick="changeNav('design')"&gt;&lt;a href="#" id="design"&gt;Design&lt;/a&gt;&lt;/li&gt;
            &lt;li onClick="changeNav('code')"&gt;&lt;a href="#" id="code"&gt;Programming&lt;/a&gt;&lt;/li&gt;
            &lt;li onClick="changeNav('science')"&gt;&lt;a href="#" id="science"&gt;Science&lt;/a&gt;&lt;/li&gt;
            &lt;li onClick="changeNav('Kim')"&gt;&lt;a href="#" id="Kim"&gt;Kim&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="subNav"&gt; 
          &lt;script&gt;changeNav("design");&lt;/script&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;p id="mainText"&gt;Test&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the JS code:</p>
  
  <pre><code>var topNavNames = ["design", "code", "science", "Kim"];
  var subNavCode = ["&lt;ul&gt;&lt;li onClick=\"loadPHP('design/websites.php', 'sub0')\"&gt;&lt;a href=\"#\" id=\"sub0\"&gt;Websites&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('design/graphics.php', 'sub1')\"&gt;&lt;a href=\"#\" id=\"sub1\"&gt;Graphics&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('design/flash.php', 'sub2')\"&gt;&lt;a href=\"#\" id=\"sub2\"&gt;Flash&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;",
                  "&lt;ul&gt;&lt;li onClick=\"loadPHP('code/interactive.php', 'sub0')\"&gt;&lt;a href=\"#\" id=\"sub0\"&gt;Interactive applets&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('code/statistics.php', 'sub1')\"&gt;&lt;a href=\"#\" id=\"sub1\"&gt;Statistics&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('code/wings.php', 'sub2')\"&gt;&lt;a href=\"#\" id=\"sub2\"&gt;Wings&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('code/3D.php', 'sub3')\"&gt;&lt;a href=\"#\" id=\"sub3\"&gt;3D&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;", 
                  "&lt;ul&gt;&lt;li onClick=\"loadPHP('science/3D.php', 'sub0')\"&gt;&lt;a href=\"#\" id=\"sub0\"&gt;3D&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('science/ssd.php', 'sub1')\"&gt;&lt;a href=\"#\" id=\"sub1\"&gt;Sexual Size Dimorphism&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('science/shape.php', 'sub2')\"&gt;&lt;a href=\"#\" id=\"sub2\"&gt;Wing shape&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('science/phylogenetics.php', 'sub3')\"&gt;&lt;a href=\"#\" id=\"sub3\"&gt;&lt;i&gt;Drosophila&lt;/i&gt; phylogenetics&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('science/communitygenetics.php', 'sub4')\"&gt;&lt;a href=\"#\" id=\"sub4\"&gt;Community Genetics&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('science/biodiversity.php', 'sub5')\"&gt;&lt;a href=\"#\" id=\"sub5\"&gt;Biodiversity&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;", 
                  "&lt;ul&gt;&lt;li onClick=\"loadPHP('Kim.php', 'sub0')\"&gt;&lt;a href=\"#\" id=\"sub0\"&gt;Who is Kim?&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('animals/horses.php', 'sub1')\"&gt;&lt;a href=\"#\" id=\"sub1\"&gt;Horses&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('animals/birds.php', 'sub2')\"&gt;&lt;a href=\"#\" id=\"sub2\"&gt;Birds&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('private/outdoors.php', 'sub3')\"&gt;&lt;a href=\"#\" id=\"sub3\"&gt;Outdoors&lt;/a&gt;&lt;/li&gt;&lt;li onClick=\"loadPHP('contact.php', 'sub4')\"&gt;&lt;a href=\"#\" id=\"sub4\"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;"];
  function changeNav(target) {
  for (var i = 0; i&lt;topNavNames.length; i++) {
      if (target == topNavNames[i]) {
          document.getElementById("subNav").innerHTML=subNavCode[i];
          document.getElementById(topNavNames[i]).style.color="#F7EDAA";
          document.getElementById(topNavNames[i]).style.borderBottom="thin solid #F7EDAA";
      }
      else {
          document.getElementById(topNavNames[i]).style.color="#EEE";
          document.getElementById(topNavNames[i]).style.borderBottom="thin solid #111";
      }
    }
  }
  
  function loadPHP(url, target) {
  for (var i = 0; i&lt;10; i++) {
      if(document.getElementById(target)!=null) {
          if (("sub"+i) == target) {
              document.getElementById(target).style.color="#F7EDAA";
              document.getElementById(target).style.borderBottom="thin solid #F7EDAA";
          }
          else {
              document.getElementById(target).style.color="#EEE";
              document.getElementById(target).style.borderBottom="thin solid #111";
          }
      }
  }
  }
  </code></pre>
  
  <p>if I subsequently remove the:</p>
  
  <pre><code>else {
          document.getElementById(target).style.color="#EEE";
          document.getElementById(target).style.borderBottom="thin solid #111";
      }
  </code></pre>
  
  <p>from the loadPHP function, it changes the style, but does not reset it when the next link is clicked.</p>
  
  <p>I observed this behavior in FireFox, Internet Exploder and Chrome.</p>
  
  <p>Added: CSS code:</p>
  
  <pre><code>body {
  background-color: #111111;
  color: #DDD;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  }
  .wrapper {
  overflow: auto;
  }
  .banner {
  float: left;
  position: relative;
  width: 100px;
  }
  .main {
  position: relative;
  width: 80%;
  left: 25px;
  font-size: 14px;
  font-weight: normal;
  }
  a {
  text-decoration: none;
  color: #EEE;
  }
  a:hover {
  border-bottom: thin solid #F7EDAA !important;
  color: #F7EDAA !important;
  }
  .topNav {
  height: 45px;
  position: relative;
  left: 100px;
  font-size: large;
  border: thin solid #111;
  }
  #subNav {
  height: 45px;
  position: relative;
  left: 100px;
  top: 2px;
  border: thin solid #111;
  }
  .topNav li, #subNav li {
  float: left;
  margin: 10px 15px;
  }
  .topNav ul,  #subNav ul {
  list-style: none;
  padding: 0px 0px;
  margin: 0px 0px;
  position: relative;
  left: -100px;
  }
  .content {
  position: relative;
  left: 15px;
  padding: 0px 0px;
  margin: 0px 0px;
  }
  .content p {
  padding: 5px 5px;
  margin: 10px 15px;
  left: -100px;
  }
  </code></pre>