Checking a variable in js that is directly in html file - javascript

I have one file, that is external from my index.html page, named code.js with this code on it:
function parse() {
if (a === 1)
alert("a equals 1");
}
(function() {
parse();
})();
As I said, that file is called code.js.
Now, I have an index.html file that is in the same folder/directory as the code.js file. Now, this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="code.js"></script>
<script type="text/javascript">
var a = 1;
</script>
</head>
<body>
<h1>Javascript</h1>
</body>
</html>
So I want to be able for the code.js file to use the variable from my javascript that is in the index.html file. I am doing this because I am going to make my own javascript library, but I need to do learn this first. Any solutions?

Switch the order of your script tags:
<script type="text/javascript">
var a = 1;
</script>
<script src="code.js"></script>
This way, the global variable a will be initialized before the parse method in code.js is called.

To add on to what Robby said, browsers load a page in order from top to bottom, left to right, because that is how they are written (sort of). This means in your supplied code, code.js is loaded and run before you set a=1. As Robby mentioned, you can easily switch the order of your <script> tags and be fine.
This applies to other elements as well, so any other elements will not be accessible before their place in the HTML document. For example, a <div> in the body cannot be referenced by code run in the head, because the body has not been loaded yet. You can circumvent this by adding a <script> tag at the end of your HTML document, to be run after the main document has been loaded, but not necessarily all other external data like images (external scripts should be fine, however). The snippet below is what I have found works best:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Any script here could be anywhere (embedded/external) and in any order -->
<script>
function ready() {
document.getElementById('a').textContent = 'a = ' + a;
}
</script>
<script type="text/javascript">
var a = 1;
</script>
<!-- <script src="code.js"></script> - load external code here -->
</head>
<body>
<h1>Javascript</h1>
<div id="a">a = ?</div>
<script>ready(); // Runs code after document is initialized</script>
</body>
</html>

Related

why is this happening to my JavaScript code?

so this is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three#0.126.1/build/three.module.js'
const scene = new THREE.Scene
console.log(scene)
</script>
</body>
</html>
it works just fine but as soon as i put the "src="script.js" to the script tag, the code suddenly stops working... can somebody explain to me why this is happening?
Each script tag only loads from either src or from within the body, not both. You'll need 2 script tags to load the inline code as well as the script file in one of them each.

multiple script tags for three js

I'm trying to work with three.js and really just html and js in general for the first time. I'm playing around with the example code and I found that even if I import the three.js file from the script tag in my Main.js file, it doesn't work unless I uncomment the script tag currently commented out. Why is this the case? Is there anyway i can run it in just my Main.js file without the first script tag?
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<!-- <script src="node_modules\three\build\three.js"></script> -->
<script src="js/Main.js"></script>
</body>
</html>
please try this option: in your main html page <script type="module" src="js/Main.js"></script> and in your main.js page import other js pages
Try replacing
<script src="node_module/three/build/three.js"></script>
with
<script type="module" src="node_module/three/build/three.module.js"></script>
If you are importing module functions, it should be declared as a module.
(Not sure why type="module" should be part of the tag
<script src="js/Main.js"></script>
unless Main.js is exporting functions to be used outside of it.)

Javascript files not loading for page

I have a fairly simple HTML file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>deploy.rb</title>
<script src="test.js" type="text/javascript"></script>
<script src="OtherScript.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
body
</body>
</html>
test.js looks like this:
window.onload = function () { alert("It's loaded!") }
Can someone tell me why I don't get an alert when the page loads? (and why none of the functions in OtherScript.js are executing)
The full contents of the html file can be found here, if it helps.
I'm an idiot. OtherScript.js also used window.onload. I consolidated both scripts into the same file, and now it works file.
you might check the directory structure. The code looks fine to me, so if I had to guess the .js files are not being found correctly. If they're in the same directory as the HTML file you might try appending ./ to the beginning of the filename.

.load page within linked javascript and css files

Description:
I have a main page with header, footer, etc. The content (a div within body) of this page is changing depending on where you click(menu items). The content loaded are different pages within javascript and css files.
Problem: javascript and css files of the pages loaded don't work. I have to include ALL the page in order to make it works.
For example in the next code, javascript included in status.jsp don't work:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp #information");
}
However, this works, but it is not what i want:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp");
}
The result of the last code is a page similar to this:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>MainPage</title>
</head>
<body>
<div id="content>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>Status</title>
<div id=statusBox">
information
</div>
<script type="text/javascript" src="js/status.js"></script>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

using jQuery in a js file

I know by include <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script> in HTML file, I can write in jQuery in this file directly. However, I am not working on a single file, thus, too much js code in the html doesn't look good. Can there be some method to use jQuery in js file? So I can put some common function in a standalone js file.
You can put your code in your own js file :
$(function() {
// your own code using the DOM
});
and then include this file just after the jQuery one :
<script src="scripts/jquery-1.10.2.js"></script>
<script src="myownfile.js"></script>
create a folder with the name js and inside put your js file for example main.js
your js file should start like : main.js
$(document).ready(function(){
//code here
});
note that you can use $(document).load(function() too
In your index.html put this in the footer like this : index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<!--============MAIN-CONTAINER============ -->
<section>
</section>
<!--============SIDEBAR=================== -->
<aside>
</aside>
<!--============FOOTER==================== -->
<footer>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
</body>
</html>
for the best performance.
alfernative
if you want to use it as
<script src="scripts/jquery-2.0.0.min.js"></script>
download this:
http://code.jquery.com/jquery-2.0.0.min.js
and put it into a new folder with the name scripts and replace
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
with
<script src="scripts/jquery-2.0.0.min.js"></script>
in your footer like this:
<footer>
<script src="scripts/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
Of course you can use an external .js file, just add the required scripts files and their references onto your page plus add the external .js reference along with them.
//references in mail file
<script src="../Scripts/jquery-1.7.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../Scripts/text.js" type="text/javascript"></script>
//External test.js file
$(document).ready(function () {
//your functions here
}); // Document Ready Closed
Just keep that tag for jquery and go ahead and make your own JS file with jquery code in it and include that too in the html page, It will work

Categories