Including js file in html properly with functions [duplicate] - javascript

This question already has answers here:
JavaScript not working on external file
(4 answers)
Closed 5 years ago.
i have 2 files....one html and one js....
html code:
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="external.js"></script>
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
</body>
</html>
js code:
some functions here performed on click operation.....
function onClickOperation ()
{
///here codes..
}
problem is that the functions are not being called...when i put the same js code in the html file directly, it works....what do i have to do to load those functions from separate js file?


external.js should have the code called after DOM has finished loading like so
document.addEventListener('DOMContentLoaded',function(){
// code here
});
or it should be included inside the body tag below the DOM elements it should interact with


Try wrapping the script in the body and just before the </body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
<script type="text/javascript" src="external.js"></script>
</body>
</html>

Related

Import JavaScript function into html [duplicate]

This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 18 days ago.
How I can import my function from JavaScript file into html for further use in the html script?
JavaScript file:
export function test() {
console.log('test');
}
Html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src = "script.js">
test();
</script>
</head>
<body>
</body>
</html>

Import it this way
<script type="module">
import { test } from "./script.js";
test();
</script>

If you use
<script>
</script>
and put your JavaScript inbetween the two that should work

Code not working is js seprate file but it works when i put it in a <script> [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 13 days ago.
So as the title says, i want to create a loader but the script works when i put it in the html file but i doesn't when i put it in my sperate js file.
Here's the script:
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})
and here's the html:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Bilal el Badaoui">
<meta name="description" content="The best clothes for the best price">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<div class="loader" id="ld"></div>
</body>

This block is the problem. Change this block:
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})
to:
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
Why?
You include your js script in the head of your dom. Then you have to wait if the entire dom is loaded. Because your script will start to select a element which is not loaded. For this reason you have to put your code inside the load event.

The code is read from top to bottom, so at first it reads the script and don't see the id "ld", after script he reads body and now see the id. So you must put script after div to read it first, and then the script can see items of body. So put script at the end of body.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Bilal el Badaoui">
<meta name="description" content="The best clothes for the best price">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<div class="loader" id="ld"></div>
<script src="script.js"></script>
</body>
P.S. sorry for my English)

If you are having issues linking to your external js file, can you just try adding the line below to test that?
And can you also share if the js file is in the same directory as your html file or in a different directory?
If both files are in the same directory then you should get a "hello world" Message.
alert('hello world')
var loader = document.getElementById("ld");
window.addEventListener("load", function()
{
loader.style.display = "none";
})

html javascript variable from external text file

I have a working javascript inside an html file.
The script uses a variable
var datalist = [12, 19, 3, 5, 2, 55];
How can i instead of include that data inside my html file, just put it in an external file and load it into the variable inside the html

If you really want to store it an a javascript file
(File imported in head)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="file.js"></script>
<title>title</title>
</head>
<body>
<!-- code -->
</body>
</html>

Editor from EditorJS not showing up. How to fix this?

I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!

The script isn't a type module, use:
<script type="module">

Why I am not able to set the color of element containing class top using Javascript as shown below? [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="top">surprise</div>
<script>
document.getElementsByClassName("top").style.color ="red";
</script>
</body>
</html>
I don't know why this is not working, hoping to have a good explanation .

You need to access style property on element. document.getElementsByClassName("top") will return you an HTMLCollection.
you need to update your script:
document.getElementsByClassName("top")[0].style.color ="red";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="top">surprise</div>
<script>
document.getElementsByClassName("top")[0].style.color ="red";
</script>
</body>
</html>

Categories

Resources