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.
Related
Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>
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>
Before all, I just want to apologize to my bad English (french school are not so good for practicing other languages ...).
I have a header.html on my site. I cannot modify him because it's not mine.
I just want to call an other html (one of mine, that i can modify, we can name it toto.html), when header.html is display (in other words, it's not a Java functions who call my other html, it's header.html).
I've tried some Jquery functions (like load()), Javascript and even the macro <#include from HTML, but without success.
Thanks to all for your responses.
Have a good day !
I have the following files in one directory:
helloworld.html
<p>hello!</p>
test.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#container').load('helloworld.html');
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Loading test.html in browser produces "hello!", so check if you jQuery is loaded properly.
Can you post example here to show us the context and how your page header.html is included in your site ?
I thinks it's not possible to do that : "(in other words, it's not a Java functions who call my other html, it's header.html)"
If you're not able to modify header.html or the way your page is called, it would be difficult to load anything else.
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.