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
Related
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";
})
I just build a flutter web project. I hosted it on github pages. After successfully from creating repository to deploying project I am getting this following error...
(index):46 Uncaught ReferenceError: _flutter is not defined
I don't understand why is this happening. I tried flutter clean.
I searched for the solution. but many people suggested that run flutter clean command but it made no effect on the project.
Here is my code code for web build.
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="code_snippets">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>code_snippets</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Uncaught ReferenceError: _flutter is not defined is may caused by wrong deployed folder.
you have to delpoy web directory insted of build/web
here some reference from github issue: https://github.com/flutter/flutter/issues/107448#issuecomment-1181591460
or you may try this solution :
Is `Flutter build web` supposed to output a file called flutter.js? Because it does not by me :(
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.
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.
I'm having problems in using mathquill on my website.
I'm new to this.
I'm stuck in this part
<link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
<script src="/path/to/mathquill.min.js"></script>
I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..
i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.
Do i have to place my index.php inside mqthquill-0.10.1 folder?
Here is my
<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="jquery-3.2.1.min.js"></script>
<script src="/path/to/mathquill.js"></script>
I appreciate if someone could give me the steps on how to use mathquill.
thanks in advance
Option 1
You can either download the mathquill.css and mathquill.js files from github and use them from your directory.
If you have your folder (directory) structure as below:
appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
myPage.html
Here's how you would reference the CSS and JS files:
<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>
An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:
www.mydomain.com/mypage.html
The links to css and js files in the example folder structure I mentioned above would be:
www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css
Option 2
You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>
<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->
<!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>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL -->
<p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
<script>
var problemSpan = document.getElementById('problem');
MQ.StaticMath(problemSpan);
</script>
<!-- EXAMPLE TO CREATE AN EDITABLE MATH FIELD -->
<p><span id="answer">x=</span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
checkAnswer(enteredMath);
}
}
});
</script>
</body>
</html>