changing img src through jQuery click function

Question

I want to change my img src with jQuery click function but can't seem to do it. Here is my html code:

<div id="main2"><img id='mty' style="width: 500px;height: 600px;"
src="https://cdn.pastemagazine.com/www/articles/morty%20main.jpg">
</div>

Here is my jQuery code that won't work:

<script type="text/javascript">
$('#paper').click(function() 
{
$('#mty').attr('src', 'http://www.cliparthut.com/clip-arts/1008/paper-stack-clip-art-1008442.jpg');
});  </script>

what am I doing wrong? I want to be able to change the html src if I click on #paper which is a button btw.

Where is element with id paper. Can you please add button tag also in question? — D Mishra
– D Mishra, Commented Sep 23, 2017 at 20:33

msg · Accepted Answer · 2017-09-23 20:35:50Z

2

$('#mty').attr('src', 'http://www.cliparthut.com/clip-arts/1008/paper-stack-clip-art-1008442.jpg');

You need to set "src" to img tag, not the div tag

<script type="text/javascript"> 
    $(document).ready(function(){   
        $('#paper').click(function() { 
           $('#mty').attr('src', 'http://www.cliparthut.com/clip-arts/1008/paper-stack-clip-art-1008442.jpg'); 
       }); 
   }); 
</script>

edited Sep 23, 2017 at 20:35

answered Sep 23, 2017 at 20:25

msg

1,5403 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

msg Over a year ago

Add your click event within document.ready.. $(document).ready(function(){ //add click listener here });

msg Over a year ago

try this script; <script type="text/javascript"> $(document).ready(function(){ $('#paper').click(function() { $('#mty').attr('src', 'cliparthut.com/clip-arts/1008/…); }); }); </script>

D Mishra Over a year ago

Where is element with id paper, which is used as click?

msg Over a year ago

Such mistake happens in Javascript. Glad you made it.

bro topia Over a year ago

one type took so long for me to find

D Mishra · Accepted Answer · 2017-09-23 20:36:58Z

0

Html is as-

<button type="button" id="paper">change image</button>
<div id="main2">
    <img id='mty' style="width: 500px;height: 600px;"
         src="https://cdn.pastemagazine.com/www/articles/morty%20main.jpg">
</div>

Script-

<script type="text/javascript">
    $('#paper').click(function () {
        $('#mty').attr('src', 'http://www.cliparthut.com/clip-arts/1008/paper-stack-clip-art-1008442.jpg');
    });
</script>

Things to remember-

User script after html render or use jquery ready.

answered Sep 23, 2017 at 20:36

D Mishra

1,6081 gold badge14 silver badges17 bronze badges

Comments

Tanvir Kalam · Accepted Answer · 2017-09-23 20:48:52Z

0

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>

  <body>
   <img id="image" src="http://lorempixel.com/400/200" alt="random image"/>
   <button id="changeImage">Change image</button>
   <script>
     $('#changeImage').on('click', function(){
    
    $('#image').attr('src', 'http://lorempixel.com/400/200');
     });
   </script>
  </body>

</html>

answered Sep 23, 2017 at 20:48

Tanvir Kalam

11 silver badge1 bronze badge

2 Comments

hostingutilities.com Over a year ago

Could you add some explanation as to what the OP (original poster) did wrong. Other than that, nice answer. I like that you've added in the ability to run the code snippet.

Tanvir Kalam Over a year ago

Thanks, Original poster not post details code. That's why I put details.

Collectives™ on Stack Overflow

changing img src through jQuery click function

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related