This question already has answers here:
Why am I seeing 'function not defined' on my error console when I'm sure my function IS defined?
(3 answers)
Closed 4 months ago.
I want to call the function like I did in the following HTML code:
<html>
<head>
<script>
var reg1 = new Image
var red1 = new Image
reg1.src="1.gif"
red1.src="1R.gif"
var reg1s = new Image
var red1s = new Image
reg1s.src="1s.gif"
red1s.src="1sR.gif"
var reg3s = new Image
var red3s = new Image
reg3s.src="3s.gif"
red3s.src="3sR.gif"
</script>
</head>
<body>
<script LANGUAGE="JavaScript" src="script.js">
NavigationBar();
</script>
<h1 align="center">Welcome to Drexel!</h1>
<center> <img src="DrexelDragons.png"> </center>
These images are public domain clip art obtained from
<img src="cwbutton.gif">
</body>
</html>
I am calling it from a separate .js file. Here is the code.
function NavigationBar()
{
document.write("<img src=\"1.gif\" Name=\"thereg1\">")
return ""
}
My problem is that this will run but it wont display the image or do what I want it to do while it is declared as a Function. If I just put it as a document.write statement it works just fine but I need it as a function.
Don't mix script tags that load an external resource and script tags that should execute their content. Browsers are required to ignore the content in the tag if the tag has a src attribute:
If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI
Change it to this and it should work:
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
NavigationBar();
</script>
Sources:
What does a script-Tag with src AND content mean?
http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#edef-SCRIPT
Related
This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 2 years ago.
I would like to load a javascript file in an html document.
I need to do it with a bbutton.
I have two files the "index.html" and "testing.js"
i have to load the whole of the js file.
how could this be possible?
If you have jQuery loaded in your page, just write the following line:
$.getScript("testing.js");
Otherwise you need to add a script tag as below:
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','testing.js');
document.head.appendChild(scriptTag)
also you can set async attribute to true as well.
scriptTag.async = true
Alternative (non-jQuery):
document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";
document.getElementsByTagName('body') gets an array of elements of body tag. [0] selects the first (and only, usually) element of that array.
Next, .innerHTML accesses the code inside the element (i.e., our only body tag here) and += adds the string ("<script src='testing.js'></script>") after the HTML already in it. And then the script is loaded.
Overall:
<html>
<head>
<script>
function loadScript() {
document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";
}
</script>
</head>
<body>
<button onclick='loadScript()'></button>
</body>
</html>
I do not know the structure of your HTML, but you could do this:
var button = document.getElementsByTagName('button')[0],
script = document.getElementsByTagName('script')[0];
button.addEventListener('click', handler, false);
function handler() {
script.src = 'testing.js';
console.log(script);
}
<button>OK</button>
<script src=""></script>
This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.
I'm writing java script code in script tag in head like:
<head>
<script language="javascript">
object o = new object({....});
</script>
</head>
and trying to use object a in body tag
<body>
<script>
alert(o.value);
</script>
</body>
how can i access object from body???
is their any alternatives?
<head>
<script language="javascript">
var o = new Object();
o.value="a"
</script>
</head>
<body>
<script>
$(document).ready(function()
{
alert(o.value)
});
</script>
</body>
In this case var a is accessible in complete application, but one thing you need to make sure if you are using external JS files then it must be loaded when you using the variable. try onload function to assure JS is loaded and ready to use in body:
window.onload = function ()
{
alert(a);
}
Since your variable is declared outside any functions it can be accessed from anywhere in your document from the same script block or from a seperate script block like in your example. it can even be accessed from html event-attributes like this (note that its better to attach events to html elements using using js):
<button onclick="alert(a);">Click this button to open an alert!</button>
This question already has answers here:
How may I reference the script tag that loaded the currently-executing script?
(14 answers)
Closed 8 years ago.
I have a page for example:
<body>
<script>Other js code</script>
<hr>
...
<script src="path/{the name can be different}.js"></script>
...
<hr>
...
<script>Other js code</script>
</body>
My {the name can be different}.js script block can be inserted anyware and contains:
(function () {
window.addEventListener("DOMContentLoaded", function() {
var scripts = document.getElementsByTagName('script'),
element = scripts[scripts.length - 1];
console.log(element)
// ? How to get current script tag
}, false);
})();
This code always get the latest tag.
Is it possible to get current script tag without any script id?
Thanks!
Give your script tag an Id and get the element as following
<script type="text/javascript" id="script">
function getScript()
{
var scripts = document.getElementById('script');
alert(scripts);
}
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How may I reference the script tag that loaded the currently-executing script?
Can you select the script element that included the JavaScript?
Is there any identifyScript that could make this work? jQuery is cool too.:
<script type="text/javascript" id="script1">
function identifyScript(){...}
</script>
<script type="text/javascript" id="script1">
identifyScript(); //This function would alert "script1"
</script>
<script type="text/javascript" id="script2">
identifyScript(); //This function would alert "script2"
</script>
As long as it is guaranteed that the script files are getting loaded sequentially (which means, not asyncronously), you can call the following code within each javascript file:
var scripts = document.getElementsByTagName( 'script' ),
lastTag = scripts[ scripts.length - 1 ];
alert( lastTag.id );
However, this concept breaks as soon as there is an async or defer attribute within those <script> elements. Each of these attributes allows the browser to delay the loading of scripts and order is no longer guaranteed.
But if you're loading your files without any async flags, this will work just fine because each script accesses the last inserted <script> node, which must be the one it was loaded from.
<script type="text/javascript">
function identifyScript() {
scripts = document.getElementsByTagName("script");
alert(scripts[scripts.length - 1].id);
}
</script>
<script type="text/javascript" id="script1">
identifyScript(); //This function would alert "script1"
</script>
<script type="text/javascript" id="script2">
identifyScript(); //This function would alert "script2"
</script>
This works because at the time it's run in each block, that block is the last one to exist so is the last one in the collection.