My jQuery is just not working - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
December 5, 2014 at 1:36 am #189979
elczrilo
Participant
I’m completely new at this so it might seem very basic. I looked everywhere but really didn’t find anything to help me out with this problem.

I have a very simple basic HTML page linked to a .css stylesheet and a .js script.
The HTML and CSS are loading fine, but the jQuery, which is a .click(); function applied to a simple button, just doesn’t seem to work and I don’t know what’s going on.

So here is my HTML, and jQuery codes followed by a list of what I’ve tried so far:
The HTML
`
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel=”stylesheet” type=”text/css” href=”file:///C:/Users/Cyril/Desktop/Templates/DynamicToDoList.css”/>
<script language= “javascript” type=”text/javascript” src=”file:///C:/Users/Cyril/Desktop/jQuery_Library/jquery-library-1.11.1.js”><script/>
<script src=”file:///C:/Users/Cyril/Desktop/Templates/DynamicToDoList.js”></script>
</head>
<body>
<h2>To Do</h2>
<form name=”checkListForm”>
<input type=”text” name=”checkListItem”/>
</form>

<div>Add!</div>
```
<br/>
<div></div>
```
</body>

</html>
`

And the jQuery:
`
$(document).ready(function () {
$(“#button”).click(function() {
var toAdd = $(“input[name=checkListItem]”).val();
$(“.list”).append(‘<div>’ + toAdd + ‘</div>’);
});
$(document).on(“click”, “.item”, function() {
$(this).remove(); });
});

`
I learned this jQuery code on the codecademy.com website and decided to fool around with it on my own a little, but I haven’t got that far yet since it’s not even loading.
On codecademy.com there is a preview panel where the results of your code are displayed. Now to me it seems there is no fault in the jQuery code itself, because it’s doing everything it’s supposed to on the codecademy website’s preview panel (I purposefully added sytax errors to test if the site would still display good results with wrong code and the code no longer works when I do it, so it looks pretty solid).

Next, I thought it might be how I’m linking the .js file to my HTML file. I double and triple checked the links and they’re fine, that really is the filepath for my DynamicToDoList.js file.
Also the CSS is working perfectly fine, and since I used the same method to obtain filepaths for both the href and the src attributes in the <link> and <script> tags I imagine it should be linking correctly.
Finally I did not know that one had to first load the jQuery library before being able to execute any scripts. I found a method of doing this online and downloaded the jQuery library from jQuery.com. I then linked to it using a <script> tag placed just above the <script> tag linking to the .js file containing my code.

And well so far, no luck. It really seems like I tried everything. I moved tags around, tried adding or deleting attributes in the script tags. Moving the files to a more direct location and relinking. Renaming the files, deleting space and relinking. Double and triple checking the jQuery code itself. Downloading compressed and uncompressed libraries, even linking to Microsoft or Google CDN. Updating my browser. Disabling all useless plugins. Restarting the browser(Firefox). Trying it in different browsers (IE, Chrome, Opera, Safari).
Nothing so fat has worked. And I’ve run out of things to try!
December 5, 2014 at 4:16 am #189985

Paulie_D
Member

Yout code did not come through very well.

Could you make a Codepen.io demo?

December 5, 2014 at 4:48 am #189989

elczrilo
Participant

Well none of the code above was trucated or had it’s syntax modified it’s just got that weird aesthetic black box thingy in the middle.
I did just create a codepen demo but turns out I won’t need it cause I tried opening the .html file just now and it’s working for some unknown reason.

Solved.

I have no idea what happened, what changed or why. But, my code is now working.

And codepen is pretty cool, I think it will come in handy in the future, thanks for showing me!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘JavaScript’ is closed to new topics and replies.