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>
Related
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">
If I had a markup like this:
<!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 src="file.js"></script>
<title>Document</title>
</head>
<body>
<h1>This is a header</h1>
<div id='container'>
</div>
</body>
</html>
and a JavaScript file associated with it like this:
const newButton = document.createElement('button');
newButton.innerText='Hey!';
document.getElementById('container').appendChild('newButton');
Why do I need to fetch div by either it's Id or by a referencing it to a variable via querySelector(), but I can simply reference body by something like:
document.body.appendChild('newButton');
What I am trying to do is when the user creates some post(social media post) it has a unique id in backend
example 1123 and one more post with unique id of 1134 there is only one html page How and to access them the urls are like this
mysite.com/post/1123------>post.html
mysite.com/post/1134------>post.html
how do I map these two urls to same page using javascript.
And I dont want to pass the unique ids in parameters because these are the links to specific post that all users can see
Can anybody help me on this
It should be like this
First Post with ID 1123
URL mysite.com/post/1123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello id 1123</h1>
</body>
</html>
and the next post(social media post) with id 1134
URL mysite.com/post/1134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello id 1134</h1>
</body>
</html>
And these two URL's are pointing to same html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2> why ${variableName} is in consider as undefined in jsp page
<script>
let x="x";
console.log(`${x} is the variable`)
</script>
</body>
</html>
${} is consider as undefined in jsp pages.
Please tell me how it is coming as not expexted.
Thank You!
The fix is to escape the ${myVar} with a backslash so that JSP ignores it:
//my.jsp
<script>
var n = "Dave";
var s = `Hello \${n}`; //note the backslash
</script>
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>