why is this happening to my JavaScript code? - javascript

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.

Related

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.)

Keep getting an error because getElementById returns null

So, I'm trying to position a div with JavaScript, but when I do, I get the error "Uncaught: TypeError: Cannot read property 'style' of null".
I then decided to try window.onLoad, because maybe the page wasn't fully loaded, but I still get the error.
To make it clear, I know that getElementById returns null, I'm now just searching for a solution.
The HTML code:
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div id="sjuku"></div>
</body>
</html>
The JavaScript code:
var square = document.getElementById("sjuku");
window.onload = function() {
square.style.top = 100 + "px";
};
Your script is running before the body is encountered so at that point, the element doesn't exist and your document.getElementById("sjuku") line fails. Move your script to just before the closing body tag.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sjuku"></div>
<script src="main.js"></script>
</body>
</html>
And, by doing that, you really don't even need an onload event handler (unless you need to wait for external resources, like images, to finish loading) because by the time the parser gets to that location, all of the body HTML will have been parsed into memory and you save the need to wire up an event handler:
Also, if you know you want the top at 100px, just write:
square.style.top = "100px";
So, your JavaScript in main.js can just be:
document.getElementById("sjuku").style.top = "100px";
If you keep your script tag in the head element you can use the defer attribute
<head>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
...
</body>
The defer attribute specifies that the script is executed when the page has finished parsing. Heads up though, this only works for external scripts.

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.

Checking a variable in js that is directly in html file

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>

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

Categories