Vfrdtyky

I am trying to change the source by clicking on the anchor. This is what I have tried so far:

<div class="main">

  <a id="popularity" href="#"><div class="banner-part l_banner_efs">

    <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">

    <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>

    <p class="banner-text">Dynamic audience size and sales counters</p>

  </a></div>

  <div class="phone_banner Column">

    <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">

  </div>

</div>

JS:

$(document).ready(function() {



  $("#popularity").click(function() {

      $('.img_main').attr('src', 'img/phones/2.png');

    })



});

Nothing happens when I click on my link.

It isn't working as your HTML structure is invalid. You have an additional closing </div> tag at the very bottom. Remove this and it will work for you.

See working example below:

$(document).ready(function() {

  $("#popularity").click(function() {

    $('.img_main').attr('src', 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded');

  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">

  <a id="popularity" href="#">

    <div class="banner-part l_banner_efs">

      <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">

      <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>

      <p class="banner-text">Dynamic audience size and sales counters</p>

    </div>

  </a>

</div>



<div class="phone_banner Column">

  <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">

</div>

<!-- </div> <--- Remove this -->

You just need to check closing tag of </div>

<div class="main">

  <a id="popularity" href="#">

    <div class="banner-part l_banner_efs">

    <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">

    <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>

    <p class="banner-text">Dynamic audience size and sales counters</p>

    </div>

  </a>

  <div class="phone_banner Column">

    <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">

  </div>

</div>

As everybody is pointing out, the invalid HTML structure is what causes this issue. Normally, browsers fix up bad HTML as best they can. In this case, you end up with HTML like:

<div class="main">

  <a id="popularity" href="#"></a><div class="banner-part l_banner_efs"><a id="popularity" href="#">

    <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">

    <h3 class="banner-header">POPULARITY<br>MESSAGING</h3>

    <p class="banner-text">Dynamic audience size and sales counters</p>

  </a></div>

  <div class="phone_banner Column">

    <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">

  </div>

</div>

Note that the anchor is split into two elements, both with the same id. ids must be unique. When they aren't, and you select by id, you usually only get the first element with that id. Your javascript, $("#popularity"), selects that first anchor to which you then attach a click handler. But that anchor doesn't contain anything, collapses to nothing, and so can't be normally interacted with. All the clicking the user does happens on the second anchor which doesn't have a click handler associated with it.

Of course, fixing the HTML structure will fix this issue.

There are unbalanced tag in you html. The closing div tag after closing a need to before closing a

like this

</div>

  </a>

$(document).ready(function() {



  $("#popularity").click(function() {

    $('.img_main').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg');

  })



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">

  <a id="popularity" href="#">

    <div class="banner-part l_banner_efs">

      <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">

      <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>

      <p class="banner-text">Dynamic audience size and sales counters</p>

    </div>

  </a>



  <div class="phone_banner Column">

    <img class="img_main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Larix_decidua_Aletschwald.jpg/220px-Larix_decidua_Aletschwald.jpg" alt="screenshot from iOS">

  </div>

</div>