This is a simple practical but I'm not sure what I'm doing wrong.
I have the following code in my external javascript file:
function myname(){
document.write("Monique");
}
function welcomeW(name){
document.write("Welcome " + name + "!");
}
function welcomeR(name){
return "Welcome " name "!";
}
I added this <script> tag to link to my html file:
<script src="script.js" type="text/javascript"></script>
I tried calling the functions in html using:
<script> myname(); </script>
<script> welcomeW(Monique); </script>
<script> welcomeR(Monique); </script>
when I wrote the function in html it worked, but in the external file nothing happens.
Monique , there is only one issue in your code, please use single quote (i.e 'Monique') or double quote ("Monique") when you are passing argument, i thing you are getting "Uncaught ReferenceError: Monique is not defined" error message.
<script> myname(); </script>
<script> welcomeW("Monique"); </script>
<script> welcomeR("Monique"); </script>
Or use this.
<script> myname(); </script>
<script> welcomeW('Monique'); </script>
<script> welcomeR('Monique'); </script>
If a <script> has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).
You need to use multiple script elements.
a <script> to load the external script
a <script> to hold your inline code (with the call to the function in
the external script)
You might have put the <script src="<your js file>" type="text/javascript"></script> at the wrong place in your html file. Try putting it in the <head></head> or before your body closing tag </body>.
Another common mistake is in <script src="<your js file>" type="text/javascript"></script> try entering the location of like for example: <script src="./index.js" type="text/javascript"></script> if your index.js file is in the same folder as your index.html.
Hope it helps!
From whay you described, you are calling your functions and linking the js file in Html correctly. There's just a couple things that are causing errors.
The welcomeR function has a littly syntax error. You are likely running into Uncaught SyntaxError: Unexpected identifier 'name' and *uncaught ReferenceError: myname is not defined". You needs to have "+" between the strings and name for the return statement of welcomeR to resolve this error. Use console.log() statements to check that your js file is running as you intended.
When you are calling the functions in your html file with , you should have an uncaught syntax error where Monique is not defined. You just need to change the welcomeW and welcomeR function from
<script> myname(); </script>
<script> welcomeW(Monique); </script>
<script> welcomeR(Monique); </script>
to
<script> myname(); </script>
<script> welcomeW("Monique"); </script>
<script> welcomeR("Monique"); </script>
so you are passing strings in.
With this, you should be able to get "MoniqueWelcome Monique!" for your output.
The last function welcomeR does not output anything into the output file because it is returning a str, and not changing the content of your external file. If you wish to have it also output into you file, write
welcomeR("Monique")
as
document.write(welcomeR("Monique"));
You forgot the + at the return. And you can just call the functions in your script.If you linked it correct then it should work.
And if you didn't know. Return doesn't print/write anything. It just returns.
if you want to write it you just need to do this.
var welcomeR = return "Welcome " + name + "!"; and document.write(welcomeR);
<script>
function myname(){
document.write("Monique");
}
function welcomeW(name){
document.write("<br/>" +"Welcome " + name + "!" + "<br/>");
}
function welcomeR(name){
return "Welcome " + name + "!";
}
myname();
welcomeW("Monique");
welcomeR("Monique");
</script>
Make sure you put the script function calls after the script src tag.
Related
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.
I am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>
Below is the content in my external js file.
Please i only have one function in my js file and i am calling this function
from one of .cshtml file during onload event.
function startJs()
{
$("#tabs").tabs();
getImages();
var imgCount = 0;
var imgArray = new Array();
}
Running this code i get the error saying "$ is not referenced". I get the same "not referenced error if i use the keyword JQuery.
I also tried declaring the function like this but still getting the same message.
$(function () {
$("#tabs").tabs();
});
How can i make the Jquery symbols work in external js files. I feel that i am missing something very simple here but i just can't figure out what i am missing.
Please note i am making a call to this code from a file that has a reference to Jquery.
Anybody has any solution to this? Thanks in advance.
Your HTML should look like this, note the order of the JS files:
<html>
<head>
...
<script src="jquery.js"></script>
<script src="yourCustomFile.js"></script>
</head>
<body>
...
</body>
</html>
The code in the external file is
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
In the php file I am using
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
But this will not work why?
if I call the function in the external fil it works
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
testing.bugtest()
this will work but this not what I want it to do I want to be able to call the function in the main file? What would the cause of this problem be?
You can not use src attribute and the text node with script elements.
They must be exclusive, e.g. an element each.
So your HTML would look something like...
<script type="text/javascript" src="externalScript.js"></script>
<script type="text/javascript">
testing.bugtest();
</script>
This
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
is wrong. You can either specify a src, or run inline code.