How to make function call in HTML file be recognized in js file

Question

0.00/5 (No votes)

See more:

I have included code which works perfectly but when I move the javascript tags and code to a external .js file the function call in the html file is not recognized "function is not defined". I believe the problem is scope, of the function call in the html file... apparently its not global and therefore it is not recognized by the js file. When I moved the javascript code to an external file within the same folder as the html file I inserted <script src="myjsfile.js"></script> into the body section...I also tried inserting it into the head section, however it still didn't work. How can I make function calls (by button clicks) within my html file without having to include the javascript code in the html file? How would you fix this simple file?

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Title</title>
  <style>
  #myDIV {
    width: 200px;
    height:100px;
    background-color: #FC20FF;
    color: #27FFF8;
  }
  </style>
  </head>
<body>
  <p>Click the button to set the backgroundColor property.</p>
  <button onclick="myFunction()">Execute myFunction</button>
  <div id="myDIV">
    <h1>How are you?</h1>
  </div>
  <script>
  function myFunction() {
    document.getElementById("myDIV").style.backgroundColor = "#291CE8";
  }
  </script>
</body>
</html>

What I have tried:

Moving the location of the javascript file reference and many of the other suggestions posted on line, but none of them worked. Most talked about local and global variables, this I believe is a local or global function problem.

Posted 12-Apr-18 11:40am

Member 10628309

Updated 13-Apr-18 6:35am

Add a Solution

Comments

Bryian Tan 12-Apr-18 23:11pm

maybe the path to the JavaScript file not correct? Try you absolute path and see what happen.

F-ES Sitecore 13-Apr-18 5:14am

Either the path to the js file is wrong or you are using the function before it is defined. Showing us the code that works isn't much help, we need to see the code that doesn't work and know where the html and js files are relative to each other.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 10628309 · Answer 1 · 2018-04-13T06:36:00

Solution 1

Using the word "myFunction" for the name of the function is a problem. When I changed the name to stop or go or some other word it worked fine with the js in a separate file. Apparently the word myFunction is a protected word.

Posted 13-Apr-18 6:36am

Member 10628309