Button Isn't Doing Anything When Clicked On

I am currently trying to build a site that has three buttons, a Facebook Sharing one, a Twitter one, and another one that links to a video. They are classed as 'facebook', 'twitter

Solution 1:

You're just missing some brackets

(function() {
    var clicks = 0;
    $('button').on('click', function() {
        ...
    });

    $('.facebook').on('click', function() {
        ...   
    });

    $('.twitter').on('click', function() {
        ...
    });

    $('.play').on('click', function() {
        ...
    });

})(); // <- Note the extra brackets

By placing your code inside (function() { ... })() you are creating an function expression and then immediately invoking it. This is known as an IIFE (immediately invoked function expression)

---

Update

Here is the code using jQuery's document.ready approach. Using this approach the IIFE described above is not required.

This approach waits until all the elements on the page have loaded before executing the code

$(document).ready(function() {
    var clicks = 0;
    $('button').on('click', function() {
        ...
    });

    $('.facebook').on('click', function() {
        ...   
    });

    $('.twitter').on('click', function() {
        ...
    });

    $('.play').on('click', function() {
        ...
    });

});