Separate HTML / JavaScript - javascript

I'm attempting to have my JavaScript code in a file apart from my HTML file.
Linking the 2 scripts between each other works, however stuff like the function document.getElementById() doesn't.
Anyone know how to fix this?
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Boost</title>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h3>
<p id="TopTextParagraph">Hi there</p>
<div>
<button id="clickNext">Next</button>
</div>
</h3>
</body>
</html>
JavaScript code:
document.getElementById("clickNext").onclick = goNext;
function goNext() {
console.log("stuff here")
}
JavaScript works when I put it in the HTML file using <script> </script>, just don't know how to make it work in a separate JavaScript file.

You are adding the script inside head tag. When that snippet is executed clickNext element does not exist in the dom
You can add the script near the closing body tag to resolve the problem & remove from the head tag
<body>
<h3>
<p id="TopTextParagraph"> Hi there</p>
<div>< button id="clickNext"> Next</button></div>
</h3>
<script src="javascript.js"></script>
</body>

Related

Why can't I just declare the script in <head>? [duplicate]

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.
When I de-comment in the HTML, the code works properly. May I ask what the problem is and why it happened? Just started learning web programming last week, thanks a lot.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script src="jquery-3.3.1.js"></script>
<script src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<span id="id1">Welcome back to my site. </span>
<div id="div1" >
<p>Hi</p>
Hi
<!--<script src="menu.js"></script> -->
</div>
<input type="button" id="btn" value="Toggle" />
</body>
</html>
JavaScript (menu.js)
$("#hyper").click(function(){
alert("Hi");
});
The problem is that when the <script> is in <head> its executed before the document has been loaded. It means when the <script> is in <head> and $("#hyper") line is executed at that time the element
Hi
is not generated. So it doesnot work.
Solution:
Put your <script> at end of <body>
Or you can use document.ready()
Below are two examples to see the difference.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//At this point "<div id="test"><div>" is not loaded
console.log($('#test').length) //0
console.log(document.querySelector('#test')) //null
</script>
<div id="test"><div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><div>
<script>
console.log($('#test').length) //1
console.log(document.querySelector('#test')) //<div id="test">…</div>
</script>
There are two problems with scripts in the <head>
Those scripts are executed before loading of the body, sometimes this may cause problems, however you can overcome this problem using document.ready or window.onload etc.
In big applications scripts become very big file, then if you've loaded them in the <head>, then user have to wait until they load fully to see anything on the webpage, but if you put them in the footer of the page, then you can create a pre-loader on the webpage, which will be loaded and shown to the user until all the scripts load completely.

jQuery Not Working in Eclipse

Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first

Jquery not working dreamweaver. Not sure if properly linked

So this is a weird problem. I have a very simple Jquery code in JavaScript file and a very basic HTML file in dreamweaver. I have linked the .js with html as usual but nothing is taking any effect at all both in dreamweaver and in browser as well.
HTML Code for HEAD
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>College ink.</title>
<link rel="stylesheet" href="homeCSS.css"/>
<script type="text/javascript" src="JQuery-Home.js"></script>
</head>
HTML CODE FOR SPECIFIC ELEMENT IN BODY
<section>
<div class="mainBox" id="designBox">
<div class="mainSubBox">
<p class="subBoxText">
Design
</p>
</div>
</div>
</section>
THIS IS THE JQUERY CODE (There is nothing above or below this code in .js file)
$(document).ready(function() {
$('.mainBox').mouseenter(function() {
$(this).fadeOut('slow');
});
});
Can you find out the actual problem? Has it got anything to with CSS?
Thank You
It doesn't look like you included the jQuery library. Add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
in the head beside your other script.
jQuery install link:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Add this above where your javascript file is linked in the document.

How to execute a simple jQuery Program?

i have created a simple jQuery program.i am new to jQuery technology..please provide me where am i wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script type="text/javascript" src="jquery-1.4.2.min.js">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>
The script you've written isn't supposed to go inside the jquery script tag. It needs to go in its own one.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
The first one is to load jquery itself - it's like saying "instead of me writing some javascript here, load it from this file instead", the second one is for your own code since you've put code between the script tags.
A script element can have one script. That script can go between the start tag and the end tag or it can go in another file and be referenced with a src attribute.
If there is a src attribute, then the content of the element will be ignored.
If you want two scripts, then you need two script elements.
<script src="jquery.js"></script>
<script>
// Your code
</script>
Example: Jsdiffle
This is a example with last library of Jquery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>

Script tag attributes - javascript

I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/html" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.
I am probably missing something very basic...
You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
And then in your javascript somescript.js you need to get the contents of that script tag using something like this
var uncompiledTemplate = document.getElementById('template1').innerHtml;
// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);
And then you can work with your template!
The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.

Categories