This question already has answers here:
JSHint and jQuery: '$' is not defined
(9 answers)
Closed 6 years ago.
I am practicing my JQuery at the moment, and I cannot understand how to make this error message go away: '$' was used before it was defined. The code seems to work though. Nothing wrong with it.
I downloaded the latest version of JQuery, using a Safari browser, and writing my code in the Brackets text editor.
The Javascript code I have is:
$(document).ready(function () {
$("h2").mouseenter(function () {
$("h2").fadeTo('fast', 0);
});
$("h2").mouseleave(function () {
$("h2").fadeTo('fast', 1);
});
});
Below is a screenshot of the my code + error message
You have to tell JSLint it is a global. Add this comment to the top of your file:
/*global $, jQuery*/
Related
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 3 years ago.
I'm pretty new at Javascript and I'm following some code from Code Pen to try and create a shadow effect underneath the nav bar when the page is scrolled. The code looks like this:
$(window).scroll(function() {
if ($(window).scrollTop() > 10) {
$('#navBar').addClass('floatingNav');
} else {
$('#navBar').removeClass('floatingNav');
}
});
When I run this though, the console returns this error (in reference to the first line):
Uncaught ReferenceError: $ is not defined
I'm not sure how to resolve this. I've seen plenty of examples in other people's code where $(window).scroll works fine. Is there a way to define it? Am I missing something?
You need to add the jQuery framework for the $ to work. the $ symbol here denotes that jquery framework is used. add the following line above your <script> tag and run it again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
This question already has answers here:
Error while query selector on numeric value
(2 answers)
Closed 4 years ago.
I inherited this project built in Jekyll with Bootstrap CSS. The Javascript console keeps indicating the following error:
Syntax error, unrecognized expression: .bs-docs-container [href=#]
Pretty sure this js is causing the error:
a(".bs-docs-container [href=#]").click(function(a){
a.preventDefault()
})
But it's been a long time since I've done any javascript and I am not sure how to debug this. This looks like it is simply canceling the event if the ` when it is within a div referencing .bs-docs-container.
Any help would be appreciated.
a(".bs-docs-container [href='#']").click(function(a){
a.preventDefault()
})
Mind the single quotes around the hash
You need to quot hash mark
a(".bs-docs-container [href='#']")
This question already has an answer here:
creating an error message if browser does not support ES6 Template Literals
(1 answer)
Closed 4 years ago.
I'm trying to find a way to check if template-literals in JS are supported in the given browser. The idea is to pass them different scripts created by Babel if the browser doesn't support ES6 features. So I'm trying:
function check_es6() {
try { `foo` }
catch (e) { return false; }
return true;
}
alert(check_es6());
However, on my old iPhone I get:
Invalid character On line 141 of
https://m.xxx.org/2018/js/app.js on 1 page.
Seen in Mobile Safari 7. Last seen 20 minutes ago. Occurred once so far. Occurred before page load.
Line 141 is:
try { `foo` }
Is there a better way to do what I need?
OK, so managed to work it out myself :)
try { eval("`foo`"); }
This correctly shows "false" now when the browser doesn't support template literals, and "true" in later browsers that do.
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 have some javascript code here, that randomly changes the background of the landing page of my website. This is the code:
var bigSize = [
"url('assets/bg/front1.jpg')",
"url('assets/bg/front2.jpg')",
];
var random = Math.floor(Math.random() * 2) + 0;
document.getElementById("front").style.backgroundImage=bigSize[random];
When I load the page and take a look at my console, it gives the following error:
background.js:6 Uncaught TypeError: Cannot read property 'style' of null
at background.js:6
However, when I run the exact code through the console, the script works perfectly. Can anyone help me with this? Thanks in advance!
The problem might be that you're inserting the script tag before the body tag. Insert the script tag after the body tag. Javascript is not able to find your element, it means it hasn't been rendered to the browser yet and when you're accessing it, it is throwing an error.
This question already has answers here:
Port error while changing chrome extension from manifest v1 to v2
(2 answers)
Closed 8 years ago.
HTML // code
input id ="submit_btn" type="submit" value="find" onclick="goto();"
Javascript / code
function goto()
{
if (document.getElementById("s_keyword").value != "") {
var url = ("https://www.youtube.com/results?search_query=" + document.getElementById("s_keyword").value);
var site = window.open(url, '_blank');
site.focus();
}
};
it never enters into goto function !
Chrome extensions don't support inline events. Add the event listener in your JavaScript, and it'll be fine:
document.getElementById('submit_btn').addEventListener('click', goto);
You may want to avoid using goto as your function's name too. It may be a reserved keyword.