This question already has answers here:
JavaScript Code Inside <script> Tag
(3 answers)
Closed 8 years ago.
I'm messing around with objects and methods, and I have this really simple example that I use to test with:
var shout = {
hello: function(variable){
console.log("Hello " + variable);
}
};
shout.hello("World");
And this works fine. However, if I place the object shout in an external file, and then run shout.hello("world"); I get nothing:
//external file: test.js
var shout = {
hello: function(variable){
console.log("Hello " + variable);
}
};
<!-- my html document -->
<script src="test.js">
shout.hello("World");
</script>
What am I doing wrong?
From MDN:
script elements with an src attribute specified should not have a script embedded within its tags.
You need two separate script tags, one to import your external script, and another to call the function, for example:
<script src="test.js"></script>
<script>
shout.hello("World");
</script>
You need two separate script tags, the content of a tag with src attribute is ignored.
<script src="test.js"></script>
<script>
shout.hello("World");
</script>
Related
I have dynamic string javascript tags to execute in head of html.
Tags as follow and this tags is dynamic comes from server as a string and I want to execute this javascript into head of html. How can I best achieve this?
<script async src="/content/js/file1.js"></script>
<script async src="/content/js/file1.js"></script>
<script> alert('Execute'); </script>
You have the right idea; the problem is that you can't combine an external script (using src) with an inline one.
You simply need two different scripts for this, making sure the inline one comes after the reference to an external script:
<script src=""></script>
<script type="text/javascript">
document.getElementsByTagName("script")[0].src = "http://" + location.host + "/content/js/file1.js";
</script>
i made a html page with this coding
<html>
<head>
<script src="../a.js">
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
</head>
<body>
</body>
</html>
In a.js i have this code
function m_web(u,i) {
alert('l');
alert('u');
}
but my webpage is unable to call this function which is coded in an external file. i am not getting any alert with this. i don't know what is problem. plz tell me simple solution for this.
thanx in advance
A single <script> tag can link to an external resource using the src attribute OR contain inline JavaScript code, but it can't do both at the same time. If you specify a src attribute any content between the <script src="foo.js"> tag and the </script> tag is ignored.
Since you want to load the external JS file, and then execute some JavaScript code, you'll need two separate tags to do so:
<script src="../a.js"></script>
<script>
// your code
</script>
plz write your code like below
<script src="../a.js"></script> </script>
//^^^^^^^^^^^^^^^^^^ first close script tag of linked js file
<script type="text/javascript">// then call your inline jscode
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
Try
you are not closing script tag
<script src="../a.js"></script>
^//added closing script tag
<script>
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
to alert what you pass use
function m_web(u,i) {
alert(i);
alert(u);
}
See the source of http://marakana.com/s/post/1096/samples/try6.htm
It defines a function and calls it on load of document. (Which is the final step of this tutorial)
I tried to put it into a seperate JS file.
Runs correctly only if I call onload both in JS and in HTML.
But not only body onload or only from JS. I guess I am doing something wrong.
So, following works:
<head>
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"/>
<script type="text/javascript">
window.onload = function () {
makeWYSIWYG(document.getElementById('editor'));
};
</script>
</head>
<body onload="makeWYSIWYG(document.getElementById('editor'));">
Why do I need to call the function twice?
I only have the function definition in "Scripts/makeWYSIWYG.js"
function makeWYSIWYG(editor) {
...
return editor;
};
Thanks,
There are no reason to call the function twice. The is enough.
With the first window.onload you could be changing a former function callback assignment (i.e. in a imported script).
The problem was actually the closing tag, "/>", here:
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"/>
I should have written:
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"> </script>
I guess the second script was helping the tag to be closed and making it run...
More info here: Why don't self-closing script tags work?
This question already has answers here:
Can we call the function written in one JavaScript in another JS file?
(10 answers)
Closed 8 years ago.
I have a function in my separate js file called hello().
On my page I have this js:
<script type='text/javascript'>//do hello fnc</script>
How can I get the on page script to call the function in my main js file?
Call it in the src attribute of another script tag, before referring to any of its functions in this script.
<script type='text/javascript' src='main.js'></script>
<script type='text/javascript'>
hello();
// Anything defined in previously included js files like main.js
// is now available, as well as anything defined on this page.
</script>
Load the external file first and call the function:
<script src=external.js></script>
<script>
hello();
</script>
You just need to include the external js file:
<script type="text/javascript" src="MyOtherFile.js"></script>
And then wherever in you code you want to call the funciton:
<script type="text/javascript">hello();</script>
I am trying to load 2 javascript events/functions in the body onload as follows :-
<body onLoad="getSubs(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);getTags(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);">
Whenever I load using 2 functions the first one aborts - but if I just load the one it works fine - am I doing something wrong is it no possible to put 2 functions within the onload?
try this:
<html>
<head>
<script language="javascript">
function func1(){
//the code for your first onload here
alert("func1");
}
function func2(){
//the code for your second onload here
alert("func2");
}
function func3(){
//the code for your third onload here
alert("func3");
}
function start(){
func1();
func2();
func3();
}
</script>
</head>
<body onload="start()">
</body>
</html>
Multiple onload
Just do it from java script instead, one of the link shared into a comment explains well why it is best to use this approach over inline attributes.
<head>
<script>
document.body.onload = function() {
getSubs(...);
getTags(...);
};
</script>
</head>
<body>
...
</body>
I would avoid at all cost to have inline javascript, that is what you did in the code of your question: add javascript within an HTML attribute.
Best practice is to add your javascript in a separate file, see the related question on this principle What is Unobtrusive Javascript in layman terms?
So you'd have an other file called for instance "myjsfile.js", then you reference it from your HTML page
<script src="./path/to/your/myjsfile.js"></script>
Here is the answer to where to place this reference: Where to place Javascript in a HTML file?
Your "myjsfile.js" file would simply have:
window.onload = function(){
getSubs(...);
getTags(...);
};
Another thing to avoid: add javascript within the same HTML file. The reason is also based on the same principle of unobstrusive javascript. What is Unobtrusive Javascript in layman terms?
But I guess there are corner cases where you may want to do that.
If you really have to, do use window.onload instead of the inline javascript onload="...", see why here window.onload vs <body onload=""/>
Just add the following to your HTML file:
<script type="text/javascript">
window.onload = function(){
getSubs(...);
getTags(...);
};
</script>
Here is the answer to where to place this code: Where to place Javascript in a HTML file?
Note: Yes, in the same place as where you would put the reference to an external javascript file
Another thing: I do not know where your getSubs() and getTags() functions are defined. But if you want your code to work, it needs to call these functions after the file (or part of javascript) that defines them has been loaded.
In short: make sure the javascript file containing the definitions of getSubs() and getTags() is referenced before your code.
One thing that you could do is create a new JS function that accepts the document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value parameter and call the two functions in the newly created function.
I tried calling two functions using the below code and it worked fine for me.
<html>
<body onload="callStart();callAgain();">
<script type="text/javascript">
function callStart() {
alert('First');
}
function callAgain() {
alert('Again');
}
</script>
</body>
</html>