As a newcomer to this community and to jQuery/JavaScript, I have spent a considerable amount of time researching without finding a solution to my problem.
I attempted to create functionality where clicking on a specific element changes its class.
The important parts of my code include:
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!");
});
However, this code does not work. I did not want to download jQuery as I plan to use this code as a theme on Tumblr, where downloading it may not be ideal. Currently, I have included jQuery and my JavaScript file like this:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="javascript.js"></script>
I tried a test code to check if jQuery is loaded:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}}
The test code seems to work, but my actual code doesn't. When I paste the entire code here and run it, it works fine, so the issue might be related to including jQuery?
Please excuse me if my question sounds silly, I'm very new to all of this.