I just started learning javascript about 30 minutes ago. I'm doing an online course and they gave me this code as an example. The person in the video did the exact same thing, but it only works for me when I do inline not external. My .js name is right and they're in the same folder.
The html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<script src=“cripts.js”></script>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
</body>
</html>
and the js:
alert("YOU");
Nothing appears for me. I've tried everything to make it work, including different browsers. Could it be my computer or did I make a simple mistake?
It looks like your quotes are invalid :') Good beginner move! But it will be a simple fix. Note the “ should be ", this usually happens when copying and pasting code!
<script src="cripts.js"></script>
Also make sure your path and file name is correct?! cripts.js sounds like it is suppose to be scripts.js
A beginner mistake I made was to use <script>...</script> tags in the external javascript file. From HTML if you use:
<script type="text/javascript" src="../myApp/myFile.js"></script>
Then the external js file should just contain just the code such as:
function myFunction {}
with no script tags. This is unlike linking to external css files which include the <style>...</style> tags.
Related
Hopefully, I'm missing something simple here but when I run the following HTML code through Flask the Javascript file fails to run. When I put my Javascript code from my file inline: alert('boo'), it works fine, so my Javascript code isn't the issue. The javascript file is indeed in my static folder and the names match, also the issue is the same on multiple browsers.
No error is shown and the HTML page loads normally as though there is no Javascript/it is ignoring it.
EDIT - There is an error, I was only looking in terminal. In the browser console it says Uncaught SyntaxError: Unexpected identifier and highlights my src.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script> type="text/javascript" src="{{url_for('static', filename='javascripts.js')}}"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Okay, it's sorted now. My mistake was thinking the url_for had to be in between the script tags instead of apart of the tag. The working code is.
<script type="text/javascript" src="{{url_for('static', filename='javascripts.js')}}"></script>
I've wondered this before, but never gotten an answer. Then just today I came across another site: http://ruralcoz.com/ with no html in the source code. Only a minified script. Does anyone know how the developer built this site, and why they chose to replace all the html with javascript? What's the benefit of this? How is this done?
Thanks!
That's a React app. React uses JavaScript to create everything on the page and then loads it into the one root div on the page.
There are advantages to doing it this way and you can read more about it here
That site does have HTML in the source code, specifically:
<!doctype html>
<html lang="en">
<head>
<title>Four Points Funding</title>
<link href="/static/css/main.d6132581.css" rel="stylesheet">
...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.0673017f.js"></script>
</body>
</html>
All of the above is HTML markup, and pages must have HTML to be rendered as HTML pages. There's no way around that.
What this site is lacking is content in the <body>, which might seem a bit odd, but is very doable. Javascript can be used to create elements and to insert them into the HTML, which is happening here. For example:
<script>
const div = document.createElement('div');
div.textContent = 'Body content!';
document.body.appendChild(div);
</script>
So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.
I want to put a minified java script contents in tags directly in HTML page. i have html page like:
<html>
<head>
<script src="jquery.js"></script>
<script src="iemagic.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
</head>
</html>
I have minified all the javascript contents and put it in a single file called "all.js" and the html works fine, now it looks like :
<html>
<head>
<script src="all.js"></script>
</head>
</html>
I want to include all the content of "all.js" in to HTML directly in "script" tag. I tried with that but no luck, when i open html file in browser it show all the java script content which i have copied in "script" tag.
Is there any other way for this ?
Thank you all for helping me. i have found the solution for this. * added all the "js" files in different "script" tag tested working fine but some of the javascript lines was visible in the browswer. * The problem was "iemagic.js" was having the comments which are not proper and was creating the problem. * I have removed those commented lines and is working find now. without having any "js" file and only one HTML. Thank you All for your help and valuable time.
You can use gulp or jscompress
I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>