This is probably the weirdest thing I've encountered while programming in JavaScript, and I can't find a solution anywhere online.
So all I've done is created an html document and a JS file that is externally linked to it. When I try to reference an element from the page in the JS file, it doesn't do anything, and there aren't any errors in the console. Here's an example:
$('#box').click(function() {
alert('test');
})
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
</html>
It works wonderfully in the fiddle, but on my machine it doesn't. Also tried hosting on Google Drive, nothing. I opened it on another computer, nada. Here's the live page:
https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html
I don't understand!?!?
How does it behave if you define HTML like below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
It is actually recommended to include custom JavaScript after document body.
In addition to fixing your issue, the HTML will be displayed on the page before JavaScript execution will finished.
If scripts.js is using jquery, you need to load the jquery before you load scripts.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>
You have two separate issues:
First you must load jQuery before your script so that it is available when your script runs. So, switch the order of your two script tags to fix that issue.
Your script cannot run until the DOM is loaded. When you run it in the <head> tag, it is running BEFORE the DOM has loaded and thus the page is empty at that point so your code can't find the proper elements to install click handlers. There are a couple ways to solve this issue. The simplest is to move all your script tags to right before </body>. This will ensure that the DOM is available when the scripts run and you won't have to do anything else special.
Here's a revision of your HTML that should work:
<html>
<head>
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
You could also just switch the order of your two scripts and leave them in the <head> tag and then change your script to this:
$(document).ready(function() {
$('#box').click(function() {
alert('test');
})
});
In jQuery, the $(document).ready(fn) construct instructs jQuery to call a specific function only when the DOM has finished loading. This allows you to place this initialization script anywhere and jQuery will make sure that your callback function is not called until the DOM is ready.
Related
I just made loading screen with Javascript and am wondering which part of HTML Document it must be placed.
I mean on inside of or before closing tag???
Some documents say it must be placed on because it has to be loaded before any contents, but it seems to work well even though I put it before .
Could you tell me which part of HTML Document I "must" or "had better" put the scripts?
Is there difference in case with "defer" or "no defer"??
window.addEventListener('load', function () {
document.querySelector('#js-loading').classList.add('hide');
});
.loading {
opacity: 1;
transition-property: visibility, opacity;
transition-duration: 0.2s;
}
.loading.hide {
visibility: hidden;
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script> //Position A ???
<script src="js/script.js" defer></script> //Position A with defer???
</head>
<body>
<div class="loading" id="js-loading">
<div class="loading-img"><img src="images/loading.svg" alt=""></div>
</div>
<div>content</div>
<script src="js/script.js"></script> //Position B ???
<script src="js/script.js" defer></script> //Position B with defer???
</body>
</html>
The docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) are saying about the defer attribute:
This Boolean attribute is set to indicate to a browser that the script
is meant to be executed after the document has been parsed, but before
firing DOMContentLoaded.
Scripts with the defer attribute will prevent the DOMContentLoaded
event from firing until the script has loaded and finished evaluating.
Without the defer attribute, the scripts would be loaded immediately.
But in any case and independent of the script tag placement, the scripts will be executed before the load event is fired, so every placement is fine for a script, which adds an event listener to the load event.
Gusto-wise, I would place them in the head part, since that is much more clean, especially if you have much content in the body part.
You can use document.readyState API to know when the document is completely loaded.
You can refer this answer for more insight.
https://stackoverflow.com/a/44715040/7181668
I have never seen this before. I have always included JavaScript in my HTML files. Is this jsfiddle doing it wrong or am I naïve?
http://jsfiddle.net/relly/jjwwd4mq/
CSS file in jsfiddle:
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
I have trouble googling the issue of using a <script> tag in a CSS file, it gets conflated with other issues like executing JavaScript in a CSS file.
Also, what part should be removed? Just the top line? I am baffled by the </style> followed later by another <style>...
Apparently jsfiddle implements their CSS/JavaScript sections simply using <style></style> and <script></script> tags inside an HTML file.
I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".
I have placed one javascript (hide.js) in my html Page ... Hide function is not working .My scripts are in right order
My code is as per tutorial
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<p id="paragraph ">
This is Paragraph</p>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>
hide.js
$('#paragraph').click(function () {
$('#paragraph').hide();
});
I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
still it is not working ..
i couldnt find any relevant link ..whats wrong ..Please Suggest
Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
In case you must include hide.js first before jquery.js. Change your code to
$( document ).ready(function() {
$('#paragraph').click(function () {
$('#paragraph').hide();
});
}
In this way, your script will work after whole page is loaded.
Or, similarly you can use.
$(function() {
// Your Code
});
order should be, include jquery main file all above.
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
core jQuery file must be include before any other plugin as they may use core jquery methods internally.
You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.
You need to remove the space from your id attribute.
Order of script - hide.js is using jQuery so it has to be included after jquery.js
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined
your id has space.remove it and try again
<p id="paragraph ">This is Paragraph</p>
it should be like this
<p id="paragraph">This is Paragraph</p>
I have discovered a very strange thing which probably could be the cause. It should certainly help you.
In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.
Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.
Environment: Chrome latest Version 44.0.2403.130 m
I am working with Optimizely guiders.js example code:
http://jeffpickhardt.com/guiders/
Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.
Here is the edited HTML:
<html>
<head>
<!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="guider.js"></script>
<script type="text/javascript" src="guidedTour.js"></script>
<link rel="stylesheet" href="guider.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>
</body>
</html>
I have all the JavaScript code in guidedTour.js, in the same directory.
All .js files are also in same directory. And the code worked before extracting it in separate file.
The guiders do not load when JavaScript is in separate file.
I am getting the following error in Chrome:
"Uncaught TypeError: Cannot read property 'clientHeight' of null
jquery-1.5.1.min.js:16"
Trying a more recent version of jQuery throws an error on guiders.js.
Anyway it seems a different behavior than if I keep the JavaScript code in the index.html.
I have created a jsfiddle for the working code:
http://jsfiddle.net/vpMQy/
I do not know how to create a similar jsfiddle with the JavaScript in a separate file so that I can reproduce the problem.
Is it possible to put this JavaScript code in a separate file?
Always wrap your code inside the DOM ready handler
$(document).ready(function() {
//your code here
});
Or its shorthand
$(function() {
//your code here
});
Or put your scripts at the very end of the document's body:
//...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</body>
And you won't have problems manipulating them DOM before it's ready. =]