jQuery doesn't work, something about how I included it?

Question

I'm new to both this community as well as jQuery/JavaScript in general, but I just spent a good hour researching and I cannot at all see what's wrong.

I tried to make it that, when you click on a certain it changes the class from it.

The important parts of my code is

HTML:

<div class="taskbar">
        <div id="taskbar-start" class="taskbar-start-inactive">
            <img class="taskbar-start-logo" src="img/logo.png" /> 
            <div class="taskbar-start-text">Start</div>
        </div>
</div>

CSS:

#taskbar-start {
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 2px;
    width: 90px;
    height: 33px;
    background-color: #C2C5CA;
    cursor: pointer;
}
.taskbar-start-inactive {
    box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
}
.taskbar-start-active {
    box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset;
}

JavaScript

$('#taskbar-start').click(function() {
    $(this).toggleClass('taskbar-start-active');
    alert("Yeah!");
});

which doesn't work. Now, I didn't want to download jQuery to use it, because once it's done I wanted to use the code as a theme on Tumblr, where downloading jQuery wouldn't work very well I assume. At the moment I have it and my JavaScript file included like this:

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="javascript.js"></script>

I tried a code I found somewhere else to test if my jQuery is loaded (I forgot where I found it, I'm very sorry), which is

window.onload = function() {
if (window.jQuery) {  
    // jQuery is loaded  
    alert("Yeah!");
} else {
    // jQuery is not loaded
    alert("Doesn't Work");
}}

and THAT seems to work, but my code doesn't. If I copy my whole code in here, though, and try it out, it worked, so it's probably something with trying to include jQuery?

Like I said I'm super new so I'm really sorry if my question somehow comes off as stupid.

Wrap your code in a document.ready event handler: `$(function() { /* your code here... */ });` — Rory McCrossan, Jul 22 '17 at 18:54
Also note that jQuery has extensive documentation and learning tools: http://learn.jquery.com/using-jquery-core/document-ready/ — Rory McCrossan, Jul 22 '17 at 18:55

score 1 · Accepted Answer · answered Jul 22 '17 at 18:57

1

just put your code inside the document.ready as

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="javascript.js"></script>
<script>
    $(document).ready(function(){
        $('#taskbar-start').click(function() {
            $(this).toggleClass('taskbar-start-active');
            alert("Yeah!");
        });
    });
</script>

answered Jul 22 '17 at 18:57

RAUSHAN KUMAR

5,846
4
34
70

thank you a lot!! that worked! – alex Jul 22 '17 at 19:02
i'm going to, just gotta wait 3 minutes before I can :D – alex Jul 22 '17 at 19:04

jQuery doesn't work, something about how I included it?

1 Answers1