Trying to add onclick function to input button

Question

Basically i have a button for which i am trying to make the background change when the user clicks on it.

I know how to do it but i need to use it in a img tag, but it is not working - when i click the button it does not load the image onto it

any help would be appreciated

HTML

<img class="statusYes" src="Buttons/Button-Yes.png" ></img>

jQuery

$(".statusYes").click(function () {
    $(this).css('background-image', 'url(Buttons/Button-No.png)');
});

Why does your question and title say "button" when all you have is an image? — j08691
– j08691, Commented Nov 18, 2013 at 15:41
When you say "it does not load the image" do you mean it doesn't actually update the background-image property, or that you can't see the background-image because there's an image, the actual img, in the way of the background-image? — David Thomas
– David Thomas, Commented Nov 18, 2013 at 15:42

adeneo · Accepted Answer · 2013-11-18 15:42:32Z

6

Try something like this:

$(".statusYes").click(function() {  
   $(this).prop("src","Buttons/Button-No.png"); 
});

edited Nov 18, 2013 at 15:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

answered Nov 18, 2013 at 15:40

Lauri Elias

1,3391 gold badge22 silver badges26 bronze badges

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

Comments

Razvan Pocaznoi · Accepted Answer · 2013-11-18 15:51:30Z

1

the problem is that in your markup you put <img src="..."> and then in the jQuery you try to put a new background to the img element via CSS which is done correctly by the browser, but not shown because it is drawn under the image you put in the src attribute.

you should try:

$(".statusYes").click(function () {
    $(this).attr('src', 'Buttons/Button-No.png');
});

answered Nov 18, 2013 at 15:51

Razvan Pocaznoi

4193 silver badges4 bronze badges

Comments

Legionar · Accepted Answer · 2013-11-18 15:41:38Z

0

$(".statusYes").click(function(){  
  $(this).css('background', 'url("Buttons/Button-No.png")'); 
});

answered Nov 18, 2013 at 15:41

Legionar

7,5993 gold badges45 silver badges71 bronze badges

Comments

David Thomas · Accepted Answer · 2013-11-18 15:46:25Z

0

I'd suggest (given that you appear to be trying to toggle the yes/no options:

$(".status").click(function() {  
    $(this).prop("src",function (i,s){
        return "Buttons/Button-" + (s.indexOf('-No') > -1 ? 'Yes' : 'No') + '.png';
    });
});

This approach, obviously, adjusts the selector, leaving the 'status' to be determined by the current URL of the src property.

answered Nov 18, 2013 at 15:46

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

Trying to add onclick function to input button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related