I have a very simple directory structure with an index.html file and a main.js file at the same level and no other files/folders. But I'm unable to link this js file in my index.html.
I have posted the contents of both files below, and the expected behaviour is to have a simple alert pop-up.
Here is my HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" scr="main.js"></script>
<title>External JS Issue</title>
</head>
<body>
Some Content Here.
</body>
</html>
Here is my JS File:
alert("If you can read this, it worked!");
However, if I include this JS line of code and put it directly inside my index.html, it works fine.
Here are the screenshots:
index.html:
main.js:
Browser Screenshot with External JS(NOT Working):
index.html with inline JS:
Browser Screenshot with Inline JS(Working):
You have a typo, the attribute of the <script> tag should be src, not scr.
Related
I'm building my first web App with stencil.js and until now I had my JavaScript code in my index.html file, but now I want to move my code to a separate file (script.js). But when I link script.js file it doesn't work.
Here is my index.html file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Booker App</title>
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="manifest" href="/manifest.json">
<script src="./script.js"></script>
</head>
<body>
<booker-header></booker-header>
<booker-display></booker-display>
<booker-buttons name="Add Books"></booker-buttons>
<booker-form></booker-form>
<!-- <script>
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function() {
form.open();
})
</script> -->
</body>
</html>
And here is my script.js file:
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
I tried putting script tag before </body> and it didn't help
Original Answer, still relevant
By moving your script into an external file it can now execute before the rest of the page is loaded since the script tag is above where the commented script is in the original HTML page.
Try wrapping your entire script in the DOMContentLoaded event to force it to wait until all of the page has loaded.
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
});
404 error answer
The src attribute for script.js starts with ./ and not / like all of the other resources you're loading in the header. Technically that's a relative reference which is ok, as long as script.js is right next to the HTML file in the directory tree.
Check your directory tree and make sure you have something like this. And make sure you have script.js at the root location which appears to be right next to mainfest.json.
- index.html
- script.js
-build
|-app.esm.js
|-app.js
When I make a JS file and run it in Terminal it successfully runs .
code:
function add(x,y){
var sum = x+y;
console.log(sum);
}
add(15,5);
this code gives me correct answer, but when I create an HTML file and link it with the same Javascript file and trying to run it in terminal a pop-up massage says "code language not supported or defined"
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="indaxi.js"></script>
</head>
<body>
</body>
</html>
so , why is that ..?
You will need to make sure that your file is referenced correctly. Here it is expected to be in the same folder as the HTML file that you have. As about the language, you can specify it as
<script type="text/javascript" src="indaxi.js"></script>
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<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>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!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">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.