Javascript function not reachable after settimeout

Question

I have designed following code snippet:

                        <div id="content">
                            <h3>Select Images Below</h3>
                            <ul id="imagegallery">
                              <li>
                                <a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
                                  <img src="./img/team/t1.jpg"  height="50px" width="50px" alt="the band in concert" />
                                </a>
                              </li>
                              <li>
                                <a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
                                  <img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
                                </a>
                              </li>
                              <li>
                                <a class='a' href="./img/team/t3.jpg" title="Rocking out">
                                  <img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
                                </a>
                              </li>
                              <li>
                                <a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
                                  <img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
                                </a>
                              </li>
                            </ul>
                            <div>
                                <img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
                            </div>
                            <div id="loading">
                                <img src="img/loading.gif" alt="">
                            </div>
                            <div id="show">
                                <h1 id ='h'>It works</h1>
                            </div>
                          </div>

and the JS for this code is something like this

window.onload = function() {
  var links = document.getElementsByClassName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      // Hide results
      document.getElementById('placeholder').style.display = 'none';
      // Show loader
      document.getElementById('loading').style.display = 'block';
      setTimeout(showpic(this), 2000);
      e.preventDefault();
    });
  }
  function showPic(whichpic) {
    document.getElementById('placeholder').style.display = 'block';
    var source = whichpic.getAttribute('href');
    var placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    return false;
  }
};

I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window

Answer 1

1. This is not correct

setTimeout(showpic(this), 2000);

You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example

setTimeout(() => showpic(this), 2000);

2. You have a typo. You declare your function as showPic but call it as showpic

Answer 2

Correct showpic(this) to () => showpic(this) .Your call to the showPic function is misspelled. Also your showPic function does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:

window.onload = function() {
  var links = document.getElementsByClassName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      // Hide results
      document.getElementById('placeholder').style.display = 'none';
      // Show loader
      document.getElementById('loading').style.display = 'block';
      setTimeout(() => showPic(this), 2000);
      e.preventDefault();
         });
    }
  }

function showPic(whichpic) {
    document.getElementById('placeholder').style.display = 'block';
    var source = whichpic.getAttribute('href');
    var placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    return false;
  }