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>
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
Hoping you good folk can help me with this one. I am trying to use a nav link to show a hidden div when clicked but I keep getting the error message
"Uncaught TypeError: Cannot read property 'display' of undefined
at HTMLAnchorElement."
this appears for the line of code = if (contentOneClick.style.display == "none") yet if i taker either the word "style" or the word "display" out of this code then i do not get the error message which has left me confused as i have watched content of this being used and working well for others. below is the whole function code. The display is set to "none" in the style code. I am new to web development so my apologies if this is a silly question.
`document.getElementById('content-one').addEventListener("click", function() {
var contentOneClick = document.getElementsByClassName(".content-one-container");
if (contentOneClick.style.display == "none")
{
console.log ("content is hidden");
}
else
{
console.log("content is visible");
}
}); `
The problem is that getElementsByClassName returns a nodeList, therefore, you should specify which element having class content-one-container you want to use:
var contentOneClick = document.getElementsByClassName("content-one-container")[0];
^ remove the .
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 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:
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*/
This question already has an answer here:
How do you assign an event handler to multiple elements in JavaScript?
(1 answer)
Closed 7 years ago.
I am trying to run a function when user clicks on a class.
Here is a fiddle with a similar setup. Except that I am not using buttons in the my code.
FIDDLE
document.querySelectorAll('.menu').onclick = function () { alert("test"); };
I've also tried using the getElementsByClassName, with the same results. Is there something I am missing here?
*Note: I need to accomplish this without jQuery
querySelectorAll returns a list of elements, so you need to specify the one you want, in your case [0]:
document.querySelectorAll('.menu')[0].onclick = function () {
alert("test");
};
jsFiddle example