Javascript - image button change on click

Question

This is my code, which I got from this site, which is confirmed as working. Not for me. Don't mind the div tag.

Paths are good, it's showing images in DW, but nothing happens after clicking on image on website...

Also, heres the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>

</head>

<body>

  <div id="container" class="container">
    <ul id="scene" class="scene border fill">
      <li id="Par_3" class="layer expand-width" data-depth="0.25"><img src="../Img/Par_3.svg" alt="Gallery"></li>
      <li id="Par_2" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.svg" alt="Grass_1"></li>
      <li id="Par_25" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.5.svg" alt="About me"></li>
      <li id="Par_1" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.svg" alt="Grass_2"></li>
      <li id="Par_15" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.5.svg" alt="Contact"></li>
      <li id="Par_0" class="layer expand-width" data-depth="0.10"><img src="../Img/Par_0.svg" alt="Rock"></li>
      <li id="Logo" class="layer expand-width"  data-depth="0.05"><img src="../Img/Logo.svg" alt="Logo"></li>
    </ul>

    <img alt="" src="../Img/Click_u.svg" id="cm" onclick="changeImage()"  />

  </div>

  <!-- Scripts -->

  <script language="javascript">
    function changeImage() {

        if (document.getElementById("cm").src == "../Img/Click_u.svg") 
        {
            document.getElementById("cm").src = "../Img/Click_ch.svg";
        }
        else 
        {
            document.getElementById("cm").src = "../Img/Click_u.svg";
        }
    }
</script>

  <script src="Parallax.js"></script>
  <script>

  var scene = document.getElementById('scene');
  var parallax = new Parallax(scene);

  </script>

</body>
</html>

what site? there's a missing link. also please dont add code as image. — Philipp Sander
– Philipp Sander, Commented Feb 23, 2017 at 17:21

Matheus Avellar · Accepted Answer · 2017-02-23 18:46:00Z

3

The thing is, .src returns not only the relative path (../Img/Click_u.svg) but the entire path (http://www.yourwebsite.com/images/Img/Click_u.svg).

So that if condition will never be true, and it will never change the image.

Perhaps try something along the lines of

if (document.getElementById("cm").src.indexOf("Click_u.svg") != -1)

To check if the snippet "Click_u.svg" can be found inside the larger string src.

Or use

document.getElementById("cm").getAttribute("src")`

and it will return you the exact value of the attribute (which is the relative path)

The code that should work on your case:

if (document.getElementById("cm").getAttribute("src") == "../Img/Click_u.svg")
{
    document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else 
{
    document.getElementById("cm").src = "../Img/Click_u.svg";
}

For some weird reason, there seems to be an invisible character just at the end of the getAttribute method. No clue as to why, but if you, reader, are willing to use this code, please retype it instead of copy-pasting.

That's a bug for another time

edited Feb 23, 2017 at 18:46

answered Feb 23, 2017 at 17:24

Matheus Avellar

1,5151 gold badge23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Filip5 Over a year ago

any way to set this to use relative path ?

Matheus Avellar Over a year ago

As far as I know, src won't ever return the relative path :\ I could be wrong though EDIT: Nevermind! I just thought of a way haha. Using .getAttribute("src"), you can fetch the relative path

Filip5 Over a year ago

Should it be something like this ? Because its still not working for me... <img alt="" src="../Img/Click_u.svg" id="cm" onclick="changeImage()" /> </div>  <script language="javascript"> function changeImage() { if (document.document.getElementById("cm").getAttribute("../Img/Click_u.svg"); { document.document.getElementById("cm").getAttribute("../Img/Click_ch.svg"); } else { document.document.getElementById("cm").getAttribute("../Img/Click_u.svg"); } }

Matheus Avellar Over a year ago

You're using document.document there. And to set the source, you still use .src = "...", but to get it, you can use the .getAttribute(). I'll edit the answer to include some code that might work.

Matheus Avellar Over a year ago

Try to do what epascarello said and console.log(document.getElementById("cm").getAttribute("src"));, then check the console to see what it gives you.

|

Collectives™ on Stack Overflow

Javascript - image button change on click

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related