This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 months ago.
I wanted to use Dart to replace JavaScript.
But it's not an advanced project. It's just a matter of dynamically changing a few elements within a single page.
For starters, I wrote the following HTML code and Dart code to find the element based on its ID and display the text in the console.
<!-- index.html -->
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<p id="first-paragraph">Target.</p>
</body>
</html>
// index.dart
import 'dart:html';
void main() {
print(querySelector('#first-paragraph')?.innerText);
}
The following command converts the file to a JavaScript file.
dart compile js index.dart -o index.js -O0
However, when I open the HTML file, the console shows null.
The first code in Dart Pad HTML mode, which is very similar to the above code, appears to work (on Dart Pad).
Why can't my code find the element?
Thanks.
Thank you for your comments. I remembered from your comments and was able to get it to work as expected by placing the script readout at the end of the body element or using window.addEventListener. I am ashamed to say that I forgot to do something so simple.
<!-- index.html -->
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="first-paragraph">Target.</p>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
or
// index.dart
import 'dart:html';
void main() {
window.addEventListener('DOMContentLoaded', (event) {
print(querySelector('#first-paragraph')?.innerText);
});
}
Related
This question already has answers here:
JQuery - $ is not defined
(36 answers)
ReferenceError: $ is not defined
(7 answers)
Closed 12 months ago.
I have jQuery library in the footer to follow the good practices. It's placed right before the </body> tag. However, I have jQuery sortable code in the middle of the page inside a modal for some reason to sort photos. My sortable code was working this way few months back up to Oct, 2021. However, I did not look up on that part of module for some months and today it's not working. The console is returning this error:
Uncaught ReferenceError: $ is not defined
Example of my code:
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
Order matters.
In your first <script> you try to call the $ function and it errors because $ isn't defined.
In your second <script> you load jQuery which defines $, but by then it is too late.
Reverse the order of your <script> elements.
It's a good practice to keep the right order when you are running any old javascript projects because the first script run sooner:
<!DOCTYPE html>
<html>
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</body>
</html>
Also check your jquery path.
jQuery script elements are usually put in the head element before the body
check here to see exactly where to place the jQuery script tag
This question already has answers here:
How to make JavaScript execute after page load?
(25 answers)
Closed 2 years ago.
This is the html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>
Testing HTML File
</title>
<script src="test.js"></script>
</head>
<body>
<p>book</p>
Follow Google Here
</body>
</html>
This is the 'test.js' script:
let link = document.body.getElementsByTagName("a")[0];
console.log(link.href);
I am using Microsoft Edge to run the JavaScript code and trying to find the first occurrence of the anchor tag. How to solve this error?
Your script is loaded before the DOM is completely loaded, therefore the element does not exist yet when you try to access it.
Either include your javascript file at the end of your page or put your code in
document.addEventListener("DOMContentLoaded", function() { // your code; }
so it will fire only when the DOM is loaded.
Just add 'defer' to your script import.
https://www.w3schools.com/tags/att_script_defer.asp
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
so I'm using this Javascript (API) that has a bunch of function. How do I go about writing it to an HTML file?
so one of the function is "api.ping()" which works fine on powershell, but I cant get it to print that in an HTML file.
So in the script I wrote
document.getElementById("demo").innerHTML = api.ping();
and the HTML is
<!DOCTYPE html>
<html>
<body>
<script type="index.js"></script>
<p id="demo"></p>
</body>
</html>
I'm trying to put the value returned from the call onto the HTML file.
I think your index.js file is probably not being included. You'll want to change the tag line to read:
<script type="text/javascript" src="index.js"></script>
Assuming that index.js is in the same directory as this HTML file.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am very new to jQuery, literally just trying to get it to work for the first time. Only the alert box works, but none of the other very simple methods I am trying out. Here are the files:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="myJavaScript.js"></script>
</head>
<body>
<h1 id="title">This is a title</h1>
<p> This is some sample text.</p>
</body>
</html>
JavaScript file:
$(document).ready(function (){alert("this works!")});
$("#title").text("but this is not not working");
As you can see the example can't be simpler. I have off course downloaded the jquery-3.1.0.min.js file and put it in the same folder as the html. If I comment out the link, the alert stops working, so I now the file is being referenced OK. Why is the second line of jQuery not working? Many thanks, P
Because the DOM(the entire structure of your application) isn't loaded yet. You need to use a $(document).ready(makes sure the DOM is loaded before running jQuery code) or an event handler to make the change visible.
This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 9 years ago.
I am having a problem with my JavaScript, when I put it into JSFiddle it works fine. But it wont work locally? Here is the fiddle: http://jsfiddle.net/4Ukkz/
var String = "preacher preacher, 5th grade teacher";
document.getElementById('text').innerHTML=String;
So the problem is. In the JSFiddle, the text will display, But locally nothing will display.
Note. It works in the fiddle. but not on my computer
In JSFiddle, your code is automatically wrapped with
window.onload = function() {
// your code
};
This is necessary because in your code, script.js is included above <div id="text"></div>. If you don't wait until that element exists, document.getElementById('text') will return null and the attempt to set innerHTML will fail.
The solution is to wrap your code as above or move your script tag below the div.
May be you don't have a script.js file with the javascript code you pasted in the fiddle?
And move the script element after your body. So your JavaScript code runs after all the elements in the body have been created.
So something like this:
<html>
<title>hi</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="text"></div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>