calling functions in html from external javascript file

Question

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.

You have a number of errors … all of which will be reported in your browser's developer tools' Console. They would also be reported if you had used a tool such as JS Hint. **Read the error messages**. — Quentin, Oct 10 '16 at 14:50
you should use quotes "" or '' for string in welcomeW( 'Monique' ) — Supersharp, Oct 10 '16 at 14:51

score 0 · Answer 1 · answered Oct 16 '16 at 20:01

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>

score 0 · Answer 2 · answered May 02 '20 at 21:29

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)

score 0 · Answer 3 · answered Jul 26 '22 at 01:27

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!

score 0 · Answer 4 · answered Nov 16 '22 at 01:51

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"));

score -1 · Answer 5 · answered Oct 10 '16 at 14:58

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>

Suhail Keyjani · Answer 6 · 2023-04-17T09:59:17.680

-1

1- correct some syntax error.
2- when you link to javascript file, documnet cannot see function in it untill it loaded, so script tags in your page exected before file has been loaded

you can fix your proplem by doing that

first add "defer" attribute to javascript link file

<script src="script.js" defer type="text/javascript"></script>

then you can write this code in your html page

document.onreadystatechange = () => {
    if (document.readyState === "complete") {
        myname();
        welcomeW("Monique");
        welcomeR("Monique"); 
    }

edited Apr 17 '23 at 09:59

answered Apr 17 '23 at 09:54

Suhail Keyjani

488
3
10

"correct some syntax error" — What syntax error. – Quentin Apr 17 '23 at 09:58
"first add "defer" attribute to javascript link file" – That will **create** the problem you say it fixes, by delaying the execution of the JS in the external file until the DOM is ready. – Quentin Apr 17 '23 at 09:59
I"m really not sure what the interaction between `document.onreadystatechange` and `defer` is, but I wouldn't be surprised if it delays the execution until the readyState is in its final state so it never changes and triggers the event handler. – Quentin Apr 17 '23 at 10:00
`welcomeW("Monique");` — Calling `document.write` **after** the DOM is complete will erase the existing document and replace it with a new one instead of adding the written output into the stream being parsed to create the document. – Quentin Apr 17 '23 at 10:01
you have syntax error in welcomeR function and you have to declare Monique variable, proplem solved when using document.onreadystatechange – Suhail Keyjani Apr 17 '23 at 10:04

score -2 · Answer 7 · answered Oct 10 '16 at 14:54

-2

Make sure you put the script function calls after the script src tag.

answered Oct 10 '16 at 14:54

sam

30
2

There are plenty of problems with the code in the question, but nothing to suggest that the order of the script elements is one of them. – Quentin Oct 10 '16 at 14:58
"when i wrote the function in html it worked but in the external file nothing happens" – sam Oct 10 '16 at 15:02

calling functions in html from external javascript file

7 Answers7