How do i make a button swap an image with another image using Jquery?

Question

I am very new to Jquery and am trying to learn it, there seems to be a problem with my code, I want it to change an image on button click but the image isn't changing.

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.3.1.min.js">
    $('input').toggle(
      function() {
        $('img').attr('src', '/images/test1.png');
      },
      function() {
        $('img').attr('src', '/images/test2.png');
      }
    );
  </script>
</head>

<body>
  <input value="change image" type="button" />
  <img src="test1.png" />
</body>

</html>

Toggle is used to Display or hide the matched elements. http://api.jquery.com/toggle/ — kiranvj, Jan 28 '19 at 13:21
wrap your js in a document ready and check the image source as you change from test1.png to images/test1.png — Pete, Jan 28 '19 at 13:21
@Ethanut, You can make it work using the methods `on` or `click` then have some logic and and set the `src` attribute using `attr`. If its not working post a new question, that way you learn .... — kiranvj, Jan 28 '19 at 13:28

Quentin · Accepted Answer · 2019-01-28T13:40:18.117

Problem 1

A script element loads a single script.

This can be from code between the start tag and the end tag or a URL specified by the src attribute.

It cannot load both.

If you provide both (as you are doing) the src attribute will be used and the inline script will be ignored.

You need two script elements. One to load the jQuery library and one to load your script which uses that library.

Problem 2

There are no input elements in your document at the time the script runs. See Why does jQuery or a DOM method such as getElementById not find the element?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    $('input').toggle(
      function() {
        $('img').attr('src', 'https://placeimg.com/150/150/animals');
      },
      function() {
        $('img').attr('src', 'https://placeimg.com/150/150/people');
      }
    );
  });
</script>
<input value="change image" type="button" />
<img src="https://placeimg.com/150/150/animals" />

Problem 3

This doesn't look like the behaviour you want (toggle doesn't toggle between two functions each time something is clicked), and you probably want to be using a click event handler instead.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    const one = 'https://placeimg.com/150/150/animals';
    const two = 'https://placeimg.com/150/150/people';

    $('input').on('click', toggle);

    function toggle() {
      const current = $('img').attr('src');
      $('img').attr('src', current === one ? two : one);
    }
  });
</script>
<input value="change image" type="button" />
<img src="https://placeimg.com/150/150/animals" />

score 0 · Answer 2 · answered Jan 28 '19 at 13:33

0

Use this code.

<!DOCTYPE html>
<html>
<head>
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
  this.src = this.src.replace("_off","_on");
} else {
  this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
</head>
<body>
<img src="xxxxxx_off.jpg" class="img-swap" />
</body>
</html>

I think Its work for you.

answered Jan 28 '19 at 13:33

Ashish Ramchandani

111
4

"Use this code" — Why? What did you change? Why should it solve the problem? Answers shouldn't be a game of spot the difference. – Quentin Jan 28 '19 at 13:36
1

`$(".img-swap").live` - http://api.jquery.com/live/ - that method has been deprecated for years and should not be used. – Quentin Jan 28 '19 at 13:37
`` — Where has the button gone? – Quentin Jan 28 '19 at 13:37
hello Quentin, for image swap in jquery we have to use replace instead of toggle – Ashish Ramchandani Jan 28 '19 at 13:38
in this image, swapping is used so there is no need of a button – Ashish Ramchandani Jan 28 '19 at 13:40
The OP said *I want it to change an image on button click* – Quentin Jan 28 '19 at 13:40

score -1 · Answer 3 · answered Jan 28 '19 at 13:28

I recommend to change your html a little bit and would also suggest to use the .click() event this way (with current src check by 'switch' expression) so it changes the image src on button click. HTML:

<button value="change-image">test</button>
<img id='image' src="/images/test1.png" />

JS:

$('button').click(
function(){
  switch($('#image').attr('src')){
      case '/images/test1.png':
      $('#image').attr('src', '/images/test2.png');
      break;
      case'/images/test2.png':
      $('#image').attr('src', '/images/test1.png');
      break;
    default:
    //no default action
      break;
  }       
}
);

That worked for me.

How do i make a button swap an image with another image using Jquery?

3 Answers3

Problem 1

Problem 2

Problem 3