How to use external ".js" files - javascript

I have the following two javascript functions:
1
showCountry()
2
showUser()
I would like to put them in external ".js" files
1
countryCode
2
<form>
<select name="users" onChange="showUser(this.value)">
<option value="1">Tom</option>
<option value="2">Bob</option>
<option value="3">Joe</option>
</select>
</form>
What is the correct syntax to call these functions?

Code like this
<html>
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
<body>
<form>
<select name="users" onChange="showUser(this.value)">
<option value="1">Tom</option>
<option value="2">Bob</option>
<option value="3">Joe</option>
</select>
</form>
</body>
</html>
I hope it will help you....
thanks

Note :- Do not use script tag in external JavaScript file.
<html>
<head>
</head>
<body>
<p id="cn"> Click on the button to change the light button</p>
<button type="button" onclick="changefont()">Click</button>
<script src="external.js"></script>
</body>
External Java Script file:-
function changefont()
{
var x = document.getElementById("cn");
x.style.fontSize = "25px";
x.style.color = "red";
}

In your head element add
<script type="text/javascript" src="myscript.js"></script>

This is the way to include an external javascript file to you HTML markup.
<script type="text/javascript" src="/js/external-javascript.js"></script>
Where external-javascript.js is the external file to be included. Make sure the path and the file name are correct while you including it.
countryCode
The above mentioned method is correct for anchor tags and will work perfectly. But for other elements you should specify the event explicitly.
Example:
<select name="users" onChange="showUser(this.value)">
Thanks,
XmindZ

You can simply add your JavaScript in body segment like this:
<body>
<script src="myScript.js"> </script>
</body>
myScript will be the file name for your JavaScript. Just write the code and enjoy!

I hope this helps someone here: I encountered an issue where I needed to use JavaScript to manipulate some dynamically generated elements. After including the code to my external .js file which I had referenced to between the <script> </script> tags at the head section and it was working perfectly, nothing worked again from the script.Tried using developer tool on FF and it returned null value for the variable holding the new element. I decided to move my script tag to the bottom of the html file just before the </body> tag and bingo every part of the script started to respond fine again.

Related

JavaScript onchange function is undefined? [duplicate]

This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 5 years ago.
I have no idea why this function keeps saying it is undefined. I'm trying to call it onchange on a tag and i'm trying to check if the value being called into the function is the value of the selected option. This is an extremely simple html page so I have no idea why this error would pop up? Can anybody tell me what's wrong with this code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Dog Decider</title>
<script src="data.js">
function buildSelect(dom){
console.log(dom);
}
</script>
</head>
<body>
<h1>Welcome to Dog Decider!</h1>
<p>Are you looking for a small or large dog?</p>
<select name="first" onchange="buildSelect(this);">
<option value="none">-- Select Dog Size --</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</body>
</html>
Originally the function was bigger and actually implemented data.js, but I tore it all down to try and discover the root of this problem...
Just remove the src="data.js" from your script tag and it should work. HTML will only evaluate the contents of script tags with the attribute type set to text/javascript or none and no src attribute.
Edit: To load data.js in your page add another empty script with src="data.js" before the script in your page.
<script src="data.js"></script>
<script type="text/javascript">
function buildSelect() {
// ...
}
</script>

How I build code such http://fiddle.jshell.net/bwKZt/152/ - HTML & Javascript

I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})

External JavaScript File not working when included in body of HTML page [duplicate]

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

Using jquery in js file

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)
did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});
not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>
There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle
If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

Force browser to download multiple script tag with same src

I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}

Categories