What I have is probably simple.
Here's my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>MC</title>
<link href="public/css/style.css" rel="stylesheet" />
</head>
<body data-page="home">
<div class="avatar" data-type="mc_face"></div>
<script type="text/javascript">mc_face("Voobus");</script>
<script type="text/javascript" href="public/js/mc_face.js"></script>
</body>
</html>
You see, I have my external javascript file being declared at the very bottom. Right above it, I am trying to execute the function that is in that file (while passing a variable to it). Everything works fine if it's all in the same file, but the goal is to later have that function being executed in a php loop, so I need the seperate.
Am I just going about it all wrong? Why doesn't it work as-is?
This is the error I'm currently getting:
Uncaught ReferenceError: mc_face is not defined
So clearly, it's having a hard time even finding the function in the external file. I've tried it with their orders reversed, with the external file in the header, and some other things. I'm really scratching my head here.
Use src not href. Also put your code below your import.
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>
console.log doesn't display what I want it to show in my chrome browser dev console.
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="script.js">
console.log(amazingCars);
var amazingCars =["BMW","Lexus","Ford","Mercedes"];
amazingCars.pop();
console.log(amazingCars);
amazingCars.sort();
console.log(amazingCars);
amazingCars.length;
console.log(amazingCars.length);
</script>
</body>
</html>
The directions for the assignment are the following:
Link the JavaScript page to the HTML page.
Create an array named amazingCars that contains four values:
BMW
Lexus
Ford
Mercedes
Remove the last value from the array
Next, sort the array in alphabetical order
Lastly, find the length of the array
I dont understand why it isn't displaying or the reason of this issue
If you are putting your JS code in html just add them between<script></script> tag.
You do not need to add src for script unless your JavaScript code is coming from a separate script file.
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site,
you should create an external JavaScript file, instead of writing the
same script over and over again. Save the script file with a .js
extension, and then refer to it using the src attribute in the
<script> tag
.
As per the instructions that you are following : "Link the JavaScript page to the HTML page."
Create another file "index.js" in your project directory.
Move your js code into the index.js file in your project directory and then use :
<script src="index.js"></script> in your HTML.
Firstly, make the <script src="index.js"></script> seperate from the code in the head, also unless if you have a seperate javascript file you dont need the src part at all, and secondly the first console.log outputs it before definition, creating an error. I hope this helped
You have to change <script src="script.js"> to <script>.
Alternatively you can keep it this way and create a script.js file and copy paste all the code you have inside the <script> tag to the file. This file need to be in the same folder as your index.html file.
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 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.
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>