JavaScript/HTML image change on click

Question

I'm currently building a website as part of my IT course, and I'm a bit confused as to why something isn't working. I've got it so when the user clicks on the title of a course, text will appear giving more information, but I'd also like an image to change when they click, to make it a bit easier to understand. Here is the JavaScript Code:

    <script language="javascript">
function changeImage()
{
    if (document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg") 
     {
         document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\openTab.jpg";
         } 
         else
         {
             document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg";
        }
    }
  </script> 

and the relevant bit of HTML:

    <img alt="" src="images/hiddenTab.jpg"style="height:22px; width:22px;" id="imgClickAndChange" onclick="changeImage()"/></p> 

Any ideas as to why it isn't working? Thanks in advance.

EDIT:Right, it's now working, except that when I click the image to collapse the text, the image doesn't change back to hiddenTab.jpg. Any ideas as to why it's doing this?

Answer 1

You are using == (testing if equal ) and not = ( assigning value to variable ) inside the if and else statements.

PS: you should change path source, your solution is not so solid right now

Answer 2

您使用了“ ==”而不是“ =”，第一个是布尔条件，第二个实际上是对它进行设置

Answer 3

In the HTML you're using a relative path and in the JS absolute paths.

function changeImage()
{
    if (document.getElementById("imgClickAndChange").src === "images\hiddenTab.jpg") 
     {
         // here you use "=" and not "=="
         document.getElementById("imgClickAndChange").src = "images\openTab.jpg";
     } 
     else
     {
         document.getElementById("imgClickAndChange").src = "images\hiddenTab.jpg";
     }
}

Answer 4

That will only work on your local computer, even if it is correct. Absolute path will only work on a computer if that computer has that directory structure and the file there. Relative path will be interpreted by the web server accordingly and will be presented to the end user, together with the document.

Also if you use the full path as a condition, that will fail to occur and you will jump to the else.

When you assign the property value you should use = and when you compare 2 values you should use ==

A nicer version of your code will be:

<script language="javascript">
function changeImage()
{
if (document.getElementById("imgClickAndChange").src=="images/hiddenTab.jpg") 
     {
     document.getElementById("imgClickAndChange").src="images/openTab.jpg";
     } 
 else
     {
     document.getElementById("imgClickAndChange").src="images/hiddenTab.jpg";
     }
 }
</script> 

Answer 5

Hope this will help.

This document.getElementById("imgClickAndChange").src return full path with your domain name. So compairing it with your "images/openTab.png" never returns true

.getAttribute("src") return exact value of your src attribute value

---

Also you are using == while assigning values. while == is used for comparison and = is used for assigning.

 <script language="javascript">
     function changeImage() {
         if (document.getElementById("imgClickAndChange").getAttribute("src") == "images/hiddenTab.png") {
             document.getElementById("imgClickAndChange").src = "images/openTab.png";
         }
         else {
             document.getElementById("imgClickAndChange").src = "images/hiddenTab.png";
         }
     }
  </script>