(jQuery) How do i set a "onclick" button for a script?

Question

Forgive me, for i am new to jQuery. I am creating a script which changes the page's background image on click. Though from all the tutorials i can find, i am not wise on how i can set a word to be "onclick". To make it easy, here is the script of mine that changes the background image:

<script>
$(function() {
    $('pixture').click(function() {
        $(this).css('background-image', 'url(resources/pixture.png)');
    });
}):
</script>

And here is where i am trying to add the button (my fail code):

<h1>
    <center>
        <font face="Lithos">
            <font color="#FF0000">
                <p class="black-text-shadow">
                    <a onclick="pixture">TOGGLE BACKGROUND PIXTURE</a>
                </p>
            </font>
    </center>
</h1>

If anyone could help me how to properly add a "onclick" function to "TOGGLE BACKGROUND PIXTURE", i would appreciate it.

Side note, please don't use the `` or `` elements. They don't exist in the current HTML standard. — j08691, Jul 15 '17 at 19:58
This question already exists in many formats (ie https://stackoverflow.com/questions/5781616/jquery-attronclick) please do not repeat questions. — Jack Dalton, Jul 15 '17 at 20:19

adeneo · Accepted Answer · 2017-07-15T20:57:13.760

2

You change the anchor from

<a onclick="pixture">TOGGLE BACKGROUND PIXTURE</a>

to something that is easily selectable, like an ID or a class

<a id="pixture">TOGGLE BACKGROUND PIXTURE</a>

Then you select it

$('#pixture').on('click', function() {
    $('body').css('background-image', 'url(resources/pixture.png)');
});

Also note that both the <center> and <font> tags where pretty much deprecated at least ten years ago, and shouldn't be used.

$(function() {
  $('#pixture').click(function() {
    $('body').css('background-image', 'url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg)');
  });
});

#pixture {
  margin : 0 auto;
  color : #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a id="pixture">TOGGLE BACKGROUND PIXTURE</a></h1>

edited Jul 15 '17 at 20:57

answered Jul 15 '17 at 19:46

adeneo

293,187
26
361
361

Well it works, but i was hoping for it to change the background image of the page's body, not the area surrounding the button. Any way to do so? – Red Beryl Jul 15 '17 at 20:52
Then it would be `$('body')` not `$(this)` – adeneo Jul 15 '17 at 20:56
Thanks a bunch. And one more thing, is there any way i can make this script toggle the background on and off? Or is that not possible? – Red Beryl Jul 15 '17 at 21:13
Thanks a bunch once again. It's EXACTLY what i wanted. – Red Beryl Jul 15 '17 at 22:03

score 0 · Answer 2 · edited Jul 15 '17 at 19:55

0

Try this, this should work well

$(function(){
    $('picture').on('click', function(){
        //your action here
    });
});

edited Jul 15 '17 at 19:55

Soviut

79,529
41
166
227

answered Jul 15 '17 at 19:53

Sunday Okoi

303
2
7

(jQuery) How do i set a "onclick" button for a script?

2 Answers2