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>

Answer 1

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

Javascript - image button change on click

Question

1 answers

solution1
3 2017-02-23 17:24:16

Javascript - image button change on click

Question

1 answers

solution1 3 2017-02-23 17:24:16

solution1
3 2017-02-23 17:24:16