CODEWITHSUNDEEP
javascriptjqueryhtmlcssxhtml
Roberto Carlos Chavez Espinosa
Roberto Carlos Chavez Espinosa

Reputation: 5

Jquery doesn't change background-image from a button

i want to create one html page with some different stuff when i create a button, but i was stuck in one method.

I´m new to jQuery and I want to show a different background image after the button is pressed. I want change the background image from the second "input" to the background image from the first "input", where, in the css:

.btn17{
    background-image: url('../Imagenes/trashc1.png');

}

.btn18{
    background-image: url('../Imagenes/trashc2.png');

}

And

<h:head>
   <title>Facelet Title</title>
    <link type="text/css" rel="stylesheet" href="CSS/Boton.css" />
    <script type="text/javascript" src="Javascript/jquery-1.9.1"/>
    <script type="text/javascript" src="Javascript/jquery-ui-1.10.3.custom"/>
    <script type="text/javascript">
        $('input:submit').on('click', function() {
            $(this).toggleClass('btn18 .btn17');
        });
    </script>
</h:head>
<h:body>
    <form>
        <input class="btn17" type="submit"  value=" "/>
    </form>
    <form>
        <input class="btn18" type="submit"  value=" "/>
    </form>
</h:body>

I did some research for ways to resolve the problem, but I am too inexperienced.

Upvotes: 0

Views: 217

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388416

Two problems

  1. Since it those are submit buttons the page will get refreshed if the default action is not prevented
  2. Since the script is in the header you need to wrap it within a dom ready handler else when the script is executed it won't be able to find the target elements to attach the event handlers

Try

jQuery(function () {
    $('input:submit').on('click', function (e) {
        $(this).toggleClass('btn18 btn17');
        e.preventDefault()
    });
})

Demo: Fiddle

Upvotes: 3

Related Questions