Implement JS in HTML - javascript

It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.

you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.

A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>

As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>

Related

linking JavaScript to HTML file

I am at my wits end with linking a javaScript file to my main.html, they are both in the same folder.
I have viewed multiple Stack overflow topics regarding this question, and for some reason none of the solutions solve my answer.
My current code is what I have below:
[main.html]
<!DOCTYPE html>
<head>
<link rel="javascript" href="jsfile.js">
<title>JavaScript</title>
</head>
<body>
<div class="Header">
<h1>JS Basics</h1>
</div>
</body>
[jsfile.js]
document.write("Hello World");
This code does not display the "Hello World" message, however if i insert the code directly into the HTML file it does.
I appreciate any and all help on this matter.
Add like following not with link.
<script type="text/javascript" src="jsfile.js"></script>
Just type:
<script src="yourJavascriptFilename.js"></script>
Most importantly add this line to the bottom of your body tag to avoid your browsing requesting JavaScript to be loaded before displaying your HTML.
You're using the incorrect link for JavaScript.
Try using this instead
<script src="jsfile.js"></script>

Using jquery in js file

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)
did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});
not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>
There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle
If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

jQuery selector not working in script but works in console

this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })

JavaScript not working as an external file

I'm new to HTML, JavaScipt and everything related to programming, and I'm trying to create a simple page.
Now, I'm stuck with the following problem: I want to change the date of my main.html file, but the main.js is not working. I've already change the <script> position to inside the <body>, after the </span> and even after the </body>, without success. If the content of the main.js is within the HTML it works fine, but as a external file it doesn't.
Here is my main.html:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="main.js"></script>
<title>Page 1</title>
</head>
<body>
<p>WRF<br>
<span id="data">18/09/1987</span></p>
</body>
</html>
My main.js is just:
document.getElementById("data").innerHTML = "JUBA";
I've looked through the internet and through this forum, but all answers that I've found did not worked.
The files are on the same directory and the main.css works fine.
Thank you in advance.
At time you call main.js element #data was not created in DOM tree. You can fix this by putting the link to your Javascript file right before closing the body like this:
<script type="text/javascript" src="main.js"></script>
</body>
Document Object Model (DOM) is not "READY".
Try use onload event, inside main.js:
window.onload = function() {
document.getElementById("data").innerHTML = "JUBA";
};
If needs more "fast" than onload, use jquery with $(document).ready:
html:
<link href="main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="main.js"></script>
main.js:
$(document).ready(function() {
$("#data").html("JUBA");
});
window.onload vs $(document).ready()
Answer by #Guffa:
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
The element is not yet accessible when you run the script.
Either you can put the script at the end of the page or delay the execution.
You could put the JavaScript in the <body> tag after the rest of the page. When the browser loads it, the <span> will already be there to be edited.
As per your code the script will be called first then page will be loaded, therefore when the script is running there will not be any element having id data because yet page have to be loaded. There are many ways to achieve what you need.
1. Add a script tag before or after end of body like
or
<script type="text/javascript" src="main.js"></script>
</body>
Write .js file above before body i.e. in head tag and write the whole javascript code in onload method.
window.onload=function(){
document.getElementById("data").innerHTML = "JUBA";
};
window.onload=function(){
document.getElementById("data").innerHTML = "JUBA";
};
<p>WRF<br>
<span id="data">18/09/1987</span></p>

JavaScript code place in the header

I am not clear why its not working the javascript code when I add it to the header section as follows.
We can place a javascript code within the body as follows
<html>
<head>
<title> Simple Test </title>
</head>
<body>
<div id="mydiv"> This is the div content </div>
<script type="text/javascript" >
document.getElementById("mydiv").innerHTML=Date();
</script>
</body>
</html>
But when I place the same JavaScript code in the header section it doesn't work.
<html>
<head>
<title> Simple Test </title>
<script type="text/javascript" >
document.getElementById("mydiv").innerHTML=Date();
</script>
</head>
Can Someone please explain the issue. I know I can Write a JavaScript function in header and call it in an event. But can't we Use in this way. If Can't why.
<html>
<head>
<title> Simple Test </title>
<script type="text/javascript" >
window.onload= function (){document.getElementById("mydiv").innerHTML=Date();}
</script>
</head>
I think above code will help you to solve your problem. You can try this one.
because when the page is loaded, by the time the browser gets to that <script> element, the #mydiv element has not yet been created.
either use an "onload" event, or put your scripts at the bottom of the page.
It's because the page is being rendered in the order it's read. Therefore when the script in the header is evaluated the rest of the page hasn't been rendered yet (ie the myDiv element hasn't been created).
When you create an event handler in the head that works fine - the handler is set up before the rest of the page is loaded but the event can't happen until the element exists.
When you put it in the <head>, it runs before the <body> exists.
this is because of the page rendering order.you can access elements before it has been created. if you can, try to put all JavaScript code end of the page(before closing body tag). it will save your page load time. if you cannot put it in the bottom, put the code inside onload event.

Categories