onclick() to change Image keeps resetting

Question

I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!

```    <head>
  <script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```

```<div class="container">
  <div class="row" id="mainContent">
    <div id="img-div">
        <img id="imageReplace" src='gem 4-3.jpg'>
    </div>
  </div>
</div>```

```<div id="side-nav">
        <ul class="nav-ul" id="style-1">
           <li class="nav-list">
            <a href="" onclick="changeImage('gem 4-3.jpg');">
                <img class="img-thumb" src="gem 4-3.jpg">
            </a> 
          </li>
          <li class="nav-list">
            <a href="" onclick="changeImage('gem 4-4.jpg');">
                <img class="img-thumb" src="gem 4-4.jpg">
            </a>
          </li>
        </ul>
</div>
<body>```

score 0 · Answer 1 · answered May 22 '19 at 01:20

0

From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.

answered May 22 '19 at 01:20

Ben Richards

3,437
1
14
18

score 0 · Answer 2 · answered May 22 '19 at 01:21

The issue is happening because of the a tag must be reloading the page on click.

Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag

      <script type="text/javascript">
          function changeImage(element) {
          document.getElementById('imageReplace').src = element;
      } </script>

      <div class="container">
        <div class="row" id="mainContent">
          <div id="img-div">
              <img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
          </div>
        </div>
      </div>
      <div id="side-nav">
              <ul class="nav-ul" id="style-1">
                <li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
                      <img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
                </li>
                <li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
                      <img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
                </li>
              </ul>
      </div>

onclick() to change Image keeps resetting

2 Answers2