2

I am trying to change a CSS Class on click. Here is the fiddle: http://jsfiddle.net/Margate/bdAD3/

<div id="MainContainer">
<div id="MainImageContainerLand">
    <img id="Main" src="MainImage01.jpg" </img>
</div>
<div id="TNBodyContainer">
    <img class="TNSL" id="TN1" style="left: 0px;" src="SmallImage01.jpg"></img>
    <img class="TNSL" id="TN2" style="left: 135px;" src="SmallImage02.jpg"></img>
    <img class="TNSL" id="TN3" style="left: 270px;" src="SmallImage03.jpg"></img>
    <img class="TNSL" id="TN4" style="left: 405px;" src="SmallImage04.jpg"></img>
    <img class="TNSL" id="TN5" style="left: 540px;" src="SmallImage05.jpg"></img>
    <img class="TNSP" id="TN6" style="left: 675px;" src="SmallImage06.jpg"></img>
    <img class="TNSP" id="TN7" style="left: 736px;" src="SmallImage07.jpg"></img>
    <img class="TNSP" id="TN8" style="left: 797px;" src="SmallImage08.jpg"></img>
    <img class="TNSP" id="TN9" style="left: 858px;" src="SmallImage09.jpg"></img>
    <img class="TNSP" id="TN10" style="left: 919px;" src="SmallImage10.jpg"></img>
</div>
 </div>



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';
    };
};

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...

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.

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!

Margate

Margate
  • 421
  • 6
  • 23
  • this may be what you're looking for: http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery – Ben Sewards May 05 '13 at 16:45

1 Answers1

1

It seems that you haven't link your javascript file to your main html file yet? From the code you provide it seems that the javascript are in the same file as html. If you want it this way you can't lay the javascript like this, you'll need a <script> tag surrounding the javascript.

There are 2 choices to choose :

Placing the js in html file, like your code here

You wrap your entire javascript code like this:

<script type="text/javascript">

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';
    };
};

</script>

Or save as a new .js file and link it to your html file

Suppose you save your entire javascript as a new file, ClickAndChange.js then you can link the html file to your javascript file by placing this

<script type="text/javascript" src="ClickAndChange.js" />

somewhere before your </body> tag.

Also, your <img id="Main" src="MainImage01.jpg" </img> code is missing one >

5argon
  • 3,683
  • 3
  • 31
  • 57
  • hello Sargon,Thank you for the help. I have update the fiddle, I overlooked the > end tag as I was mainly looking at the JS.The tags are in the file but I copied the code above from JSfiddle leaving out the script tags in the process. I think I just need a way to add either more than one var or more than one function into the above code. I can then change the CSS style onClick. – Margate May 05 '13 at 20:42