Unable to call function from external JavaScript - javascript

I have a simple HTML page which calls a JavaScript function:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="css/myscript.js"></script>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="javascript:hello()">
</body>
</html>
This is my hello() function:
<script>
function hello() {
alert("load new content");
document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}
</script>
When pasting the JavaScript block into the page directly, it works. However it's not able to find hello() if the JavaScript is contained within a dedicated file.
Using the Developer tools I can see that the JavaScript file is loaded successfully.

If you have those script tags in your js file, get rid of them.

2 issues, during parsing of your script, document is already open. If you open again, everything will be deleted so get rid of it(write is already a call to open). Second, make sure you do not add the script after the load event, so that function hello is really defined. Here I am adding it right within body (or you can use defer if you want.) Here is the fiddle
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="hello();">
</body>
function hello() {
alert("load new content");
//document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}

The contents of myscript.js should just be:
function hello() {
alert("load new content");
document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}
You would include the <script> tag only if your JavaScript were inside your HTML file; the <script> is what tells the browser, "Hey, we're not interpreting HTML anymore. This is JavaScript."
Also, as Colin pointed out in the comments, myscript.js probably doesn't belong in your css folder. A common name for the folder that contains all your website's JavaScript files is js.

Related

Replace JavaScript functionality from another JS file

My webpage is including a .js file whose functionality I have to change/replace/expand.
I have the new JS all written out and included in my webpage, but I can't get it to overwrite the original script or prevent the original script from executing.
Assume I am unable to remove the original <script> element from the page, but I am able to include my new script before the original script.
EDIT: Here's how it's laid out:
<script src="my-new-script.js"></script>
<!-- Some HTML -->
<!-- I want to replace the functionality of the below script with
"my-new-script.js" and/or prevent my-old-script.js from executing -->
<script src="my-old-script.js"></script>
The reason:
my-old-script.js is being loaded by a WordPress theme, and for my purposes I cannot change the theme or alter PHP files of the theme, so I cannot prevent my-old-script.js from being loaded. But, I can include my-new-script.js via Widgets
I looked at some of the answers given here, but they didn't seem to apply to my scenario
So I could not remove the script because it's functions were already saved in the window scope, but I could re-assign the function
<!doctype html>
<html>
<head>
<title>Test</title>
<script>
window.addEventListener("load", function() {
// document.querySelectorAll("script")[1].remove()
window.myFunc = () => {
console.log("my first func")
}
})
</script>
<script>
function myFunc() {
console.log("my second func")
}
</script>
</head>
<body>
<button type="button" onclick="myFunc()">Click</button>
</body>
</html>

Inclusion of external js file and calling a function inside the external js file does not work with same script tag

Why it is necessary to first include an external js file and call any functiont later on with new script tags ?
I am testing with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js>test();</script>
</body>
</html>
test.js
function test(){
alert(1);
}
It does not show an alert popup.
But when I include test.js separately either in body or head with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js></script>
<script>test();</script>
</body>
</html>
It does show a pop-up indeed. Does it have anything to do with the HTML parser? I am not even getting a ReferenceError displayed in the browser console so test has a reference but it is not executing.
Code in the global namespace must be loaded in the order such that executed code must first be defined.
For example, if a.js had...
var a = function() {
alert('a');
}
...and b.js had...
a()
...then you wouldn't want to include b.js before a.js, or a() won't be available.
For above,
<script src=test.js></script>
<script>test();</script>
again it is the same way: First include file, then run its contents.
this happens because when you specify a src attribute you told the browser not to look for javascript inside this tag but instead from an external one

Javascript function not found in node.js server

I followed this to set up the node.js server: Using node.js as a simple web server
So I installed the serve-static npm.
I then created a file called file called test.html with the following code
<html>
<head>
<h2>Google</h2>
</head>
<body>
<button onclick="test()">Click me</button>
</body>
</html>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript">
function test() {
console.log('test');
}
</script>
When I click on the button, I get:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test.html:8)
and nothing else. This code looks ok...? Why is this function not found?
Remove your src part if you want to have your own function in between your script tags.
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function test() {
console.log('test');
}
</script>
Also, you should put your scripts before your </body>
Put your javascript just before closing body tag (</body>)
And in your case you are binding event handler in the html itself, in this case you have to define those functions before you use them.
In this case put test() function code in head tag. It will work fine
Your JavaScript (script tag) is outside of html element. Put it in head or body.

Move javascript files into inline html

I have an application that allows the use of inline javascript, but not javascript from source files. I'm trying to modify a webpage to open on this browser, and need to know how to put the javascript files from the webpage inline.
Use <script> tags in your HTML. They can go anywhere - I prefer inside the <head> tag:
<head>
<script type="text/javascript">
// put anything here - any type of valid javascript works
// if you import jquery, you can use jquery here too!
</script>
</head>
You should place your imported code into the script tag in your HTML page (application in your case), look at the following example:
<html>
<head>
<script type="text/javascript">
//Import your JS script here, e.g.:
function doSomething(){
..
}
</script>
</head>
<body>...</body>
</html>

Best way to access external JavaScript file and place contents in div?

So, lets say you have a page that wants to load from a javascript file and it includes
temp.html file
<script src="example.js"></script>
<p class="one"></p>
Now in the example.js file you have a function that is
function getInfo() {
var place = "foo"
$(".one").html(place);
}
//Edit currently I call the function inside the JS file
getInfo();
My question is how would you connect the two files so that the external javascript file knows that it is pointed to the paragraph with the class one?
Normally when this is in a single page, you would call the function and the info will be set.
I have seen a getScript method and a load method for Jquery. Would that be applicable here?
Any ideas on how to approach this? If you provide some code that will be super helpful.
Thanks in advance.
Looks like you want to execute getInfo() as soon as it's defined (i.e.: example.js is loaded).
You can try this approach:
<script src="example.js" onload="getInfo();"></script>
In your example.js, change getInfo() to something like this:
function getInfo() {
$(document).ready(function() {
var place = "foo"
$(".one").html(place);
});
}
Your language is confusing, but you could use jQuery's $(document).ready function which would suffice. Generally speaking, an externally loaded file should execute where the tag is in the script.
A hack could be to place a tag before the end of your document body, give it an id, and then use $('#id').ready() there. In general though, you could just try coding the transclusion concept (I'm guessing you're used to this) from scratch using intervals and timeouts.
<div id="rdy">
</div>
</body>
Then in your file:
$('#rdy').ready(getInfo);
Just my added opinion, you should consider that Google is up to some not-so-nice things these days, they are long-gone from the "do no evil" mantra.
If we assume you have a JavaScript file that contains this content:
function getInfo() {
var place = "foo"
$(".one").html(place);
}
then your markup will look something like this:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="example.js"></script>
<script>
$(function(){
getInfo();
});
</script>
</head>
<body>
<p class="one"></p>
</body>
</html>
$(function(){ ... }); is just the simplified version of $(document).ready(function(){ ... });. They both more or less handle the onload event, which fires when page has finished loading.

Categories