title: Change CSS Class on click using Javascript?
body: <p>I am trying to change a CSS Class on click. Here is the fiddle:
      <a href="http://jsfiddle.net/Margate/bdAD3/" rel="nofollow">http://jsfiddle.net/Margate/bdAD3/</a></p>
  
  <pre><code>&lt;div id="MainContainer"&gt;
  &lt;div id="MainImageContainerLand"&gt;
      &lt;img id="Main" src="MainImage01.jpg" &lt;/img&gt;
  &lt;/div&gt;
  &lt;div id="TNBodyContainer"&gt;
      &lt;img class="TNSL" id="TN1" style="left: 0px;" src="SmallImage01.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSL" id="TN2" style="left: 135px;" src="SmallImage02.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSL" id="TN3" style="left: 270px;" src="SmallImage03.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSL" id="TN4" style="left: 405px;" src="SmallImage04.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSL" id="TN5" style="left: 540px;" src="SmallImage05.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSP" id="TN6" style="left: 675px;" src="SmallImage06.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSP" id="TN7" style="left: 736px;" src="SmallImage07.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSP" id="TN8" style="left: 797px;" src="SmallImage08.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSP" id="TN9" style="left: 858px;" src="SmallImage09.jpg"&gt;&lt;/img&gt;
      &lt;img class="TNSP" id="TN10" style="left: 919px;" src="SmallImage10.jpg"&gt;&lt;/img&gt;
  &lt;/div&gt;
   &lt;/div&gt;
  
  
  
  window.onload = function () {
      var ChangeMainImage = document.getElementById('Main');
  var ChangeMainImageAndDiv = document.getElementById('Main').className =  
  'MainImageContainerPort';;
      document.getElementById('TN1').onclick = function () {
          ChangeMainImage.src = 'MainImage01.jpg';
      };
      document.getElementById('TN2').onclick = function () {
          ChangeMainImage.src = 'MainImage02.jpg';
      };
      document.getElementById('TN3').onclick = function () {
          ChangeMainImage.src = 'MainImage03.jpg';
      };
      document.getElementById('TN4').onclick = function () {
          ChangeMainImage.src = 'MainImage04.jpg';
      };
      document.getElementById('TN5').onclick = function () {
          ChangeMainImage.src = 'MainImage05.jpg';
      };
  
      document.getElementById('TN6').onclick = function () {
          ChangeMainImageAndDiv.src = 'MainImage06.jpg';
      };
      document.getElementById('TN7').onclick = function () {
          ChangeMainImageAndDiv.src = 'MainImage07.jpg';
      };
      document.getElementById('TN8').onclick = function () {
          ChangeMainImageAndDiv.src = 'MainImage08.jpg';
      };
      document.getElementById('TN9').onclick = function () {
          ChangeMainImageAndDiv.src = 'MainImage09.jpg';
      };
      document.getElementById('TN10').onclick = function () {
          ChangeMainImageAndDiv.src = 'MainImage10.jpg';
      };
  };
  </code></pre>
  
  <p>I tried the upload the images to jsfiddle as well but for some reason was unable to?!
  There is a problem with the code and I am basically not that experienced in Javascript to be able to fix it. What I am trying to do it to change the CSS class when the thumbnail images change from landscape to portrait. When thumbnail 6 is clicked I want to run the var named ChangeMainImageAndDiv. This will display the portrait images correctly... </p>
  
  <p>I know that this can be done very easily and with a lot less code in jQuery but I really want to learn Jscript before I learn JQuery.</p>
  
  <p>Thank you for any help, I am sure this is an easy fix for someone who knows what they are doing. I did Google this but did not understand the codes as every where I looked had different way of doing it!</p>
  
  <p>Margate</p>