CODEWITHSUNDEEP
javascriptjqueryhtml
Desiigner
Desiigner

Reputation: 2336

Cannot change image src on click

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.

Upvotes: 0

Views: 69

Answers (5)

Ouroborus
Ouroborus

Reputation: 16894

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.

Upvotes: 1

Aquib Iqbal
Aquib Iqbal

Reputation: 375

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>

Upvotes: 2

brk
brk

Reputation: 50346

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>

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50954

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/[email protected]?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 -->

Upvotes: 5

svandewiel
svandewiel

Reputation: 56

$("a#popularity").on( "click", function() {
      $('.img_main').attr('src', 'https://images.unsplash.com/photo-1542256015-e6bb100b3f4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=61c4ef1293dde4a044a0a3efa825e17e&auto=format&fit=crop&w=500&q=60'); 
})
<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>
  </a>
</div>
<div class="phone_banner Column">
    <img class="img_main" src="https://images.unsplash.com/photo-1542223616-740d5dff7f56?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1887f4d330d6bede705000e6ed7ba193&auto=format&fit=crop&w=500&q=60" alt="screenshot from iOS">
</div>

Upvotes: 1

Related Questions