$ being undefined in Javascript [duplicate] - javascript

This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
I was copying the code from this website http://codepen.io/githiro/pen/ICfFE to use for my website and i've got an error. The very first function starts with $, $(function(){ however when I put this through and open it up on google it gets an error saying $ is undefined. I should also point out that I have called the jquery.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="script.js"></script>
<script src="jquery-2.2.2.js"></script>
<title> What Instrument are you? </title>
</head>
How would I fix this?
Thanks for your help!

You need to add jQuery to your page before your main script body.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

open it up on google it gets an error saying $ is undefined
This generally means that your jQuery reference is missing. Ensure that you include it prior to the <script> tag that contains your jQuery code :
<!-- Example CDN Reference to jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
// Your code here
});
</script>

Related

Why wont JQuery hide/show elements on my web page and how do I fix it? [duplicate]

This question already has answers here:
Is $(document).ready necessary?
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm having a problem that has just now started happening for no reason. I'm playing around with a block that detects whether you are using Adblock. It sets a variable, var canRunAds = true; in a file titled ads.js which is not really ads but all adblockers will block it regardless. Next, somewhere in index.html tests to see if canRunAds is defined or not like this:
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../javascript/ads.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
if( window.canRunAds === undefined ){
$("#adblock_off").hide();
$(".adblock_off").hide();
console.debug("adblock enabled");
}
else {
$("#adblock_on").hide();
$(".adblock_on").hide();
console.debug("adblock disabled/nonexistant");
}
</script>
<div>
<img src="../images/adblock_off.png" id="adblock_off"></img>
<img src="../images/adblock_on.png" id="adblock_on"></img>
<p class="adblock_off">Thanks for disabling your adblock!</p>
<p class="adblock_on">Disable your adblock, no ads here!<p>
</div>
</body>
This has always worked for me, however it has stopped working. The script runs the console.debug and it shows up in the console, but the elements wont hide. Any explaination?
PS: This is all documented at this GitHub repo

why i can't see the alert on my basic html (with js file ) page ? [duplicate]

This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 4 years ago.
just start learn web dev ..
i created two files
- html file
- js file
the js file i wrote code:
function func1()
{
alert("alert message");
//document.writeln("document write line");
//console.log("this is log message");
}
The html file code:
<html>
<head>
<script type="text/javascript" src="basicFile.js"/>
</head>
<body>
<script>
func1();
</script>
</body>
Why the alert does not popup ?
also the doc.writeln does not work.
When i write the js func1 directly on the html - its work fine
Because you need to close script tag differently. Do
<script type="text/javascript" src="test.js"></script>
instead of
<script type="text/javascript" src="test.js" />

Script only works in console [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I recently started to learn jQuery so I had some exercices to do. This one is about displaying messages by clicking on page element. Here is the code :
var $caption = $('caption');
$caption.on('click', function(event) {
    $(' <td>Wp it worked</td>').insertAfter('tr');
});
<!DOCTYPE html>
    <html>
        <head>
            <title>Happy Birthday !</title>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            <script type="text/javascript" src="js/script.js"></script>
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <meta charset="utf-8">
        </head>
        <body>
                <table>
                    <caption>Click here</caption>
                        <tr>
 
                        </tr>
                </table>
        </body>
    </html>
So the problem is that it doesn't work. When I write the script in the console it works perfectly, but with the js file it basicly doesn't. So I know it's not a problem of folder because when I put something like alert('test'); in the js file it works. Someone knows why ?
it is working in the snippet , however you may try this.
$(document).ready(function () {
var $caption = $('caption');
$caption.on('click', function (event) {
$(' <td>Wp it worked</td>').insertAfter('tr');
});
});

JavaScript - all DOM manipulating functions return null / empty? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
I'm learning JS from "Professional Javascript for Web Developers" and I can't play with DOM tree because it doesn't seem to work.
Here's an example I'm testing locally:
http://jsfiddle.net/y5nfL/
It alerts "DIV" on jsfiddle, while locally I'm getting this in the console:
Uncaught TypeError: Cannot read property 'tagName' of null
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS sandbox</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
And script.js
var div = document.getElementById("myDiv");
alert(div.tagName);
What am I missing? I've been trying other stuff like cloning etc. but getElementById() also returns null every time...
When your script is executed the DOM doesn't contain anything after the script tag. You need to wait until the DOM is fully ready before trying to access it.
Another, even easier, option would be moving your script tag to the very end of the document, right before </body>.

Why does self-closing script not working for ExtJS? [duplicate]

This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 2 years ago.
I am following ExtJS tutorial and tried creating a new page. It works.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function () {
console.info('woohoo!!!');
}); //end onReady
</script>
</head>
<body>
</body>
</html>
However, if I change the script tag line to use self closing tag, like following, it doesn't work.
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"/>
In Firebug, it complains Ext.EventManager is undefined. I have two questions
Is it generally a bad idea to use self-closing tag for script? I have read this post but it sounds to me it's talking about xhtml.
I am trying to learn Javascript. Although I know the way to fix it is to not use self closing tag, I would still like to know why FireFox think Ext.EventManager is undefined?
Yes, it's a bad idea. The script tag needs an ending tag, as you can see in the HTML specification - The script element
Different browsers have different ways of handling incorrect code. Each browser tries to make the best of the situation, but they have different opinions about what's best in each situation. One way to handle some of the incorrect code is to ignore it, which is likely the reason why the script is not executed in Firefox.
Besides, as you don't have a doctype tag the page is by default HTML, not XHTML, so you can't use self-closing tags at all.

Categories

Resources