CODEWITHSUNDEEP
javascripthtml
Joe
Joe

Reputation: 23

Uncaught ReferenceError: [functionName] is not defined

Sincere apologies if this has already been covered. I've been trawling StackOverflow for a while now and I cannot find anything that will fix my issue. Many people have this error, but theirs seem to be derived from syntax errors and the suchlike. I (nor JSLint) can't find any such errors, so I'm rather stumped. The following code (from the W3Schools page) does work:

<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

However, my code does not work:

  <head>
  <!--SNIP-->
  <script language="text/javascript">
    function iconclicked() {
      alert("Yay!");
    }
  </script>
  </head>
  <body>
    <div class="icon" id="misc" onclick="iconclicked()"></div>
  </body>

This produces the "Uncaught ReferenceError: iconclicked is not defined" error. But, and correct me if I'm wrong, function iconclicked() {...} is what defines the function and it is clearly present. Additionally, moving the JScript to be within the <body>tag does not fix the problem, regardless of whether to script is before or after the div. If you were to substitute the div for another element (a button, image, text, etc) or to call the function a different way (e.g. via onload) the code does not work.

I thought that perhaps it was the rest of the code on my page causing something funny to happen, so I headed over to JSFIDDLE and popped the old W3Schools code in there. Lo and behold, "Uncaught ReferenceError: myFunction is not defined". JSFDDLE link Edit: turns out this is just due to the fact I didn't choose 'no wrap' in the JSFIDDLE options - thanks Peter Healy :)

But if you go ahead put the JS inside <script> </script> tags in the HTML section of JSFIDDLE, there is no such problem and the code works as intended. JSFIDDLE link

I figure maybe this is a scope problem, but I can't for the life of me work out what it is specifically. Hopefully someone out there with more experience has the answer!

Upvotes: 2

Views: 2654

Answers (3)

Scimonster
Scimonster

Reputation: 33399

It's actually <script type="text/javascript">, with a type attribute, not language:

  <head>
  <!--SNIP-->
  <script type="text/javascript">
    function iconclicked() {
      alert("Yay!");
    }
  </script>
  </head>
  <body>
    <div class="icon" id="misc" onclick="iconclicked()"></div>
  </body>

The language attribute went out of style a while ago.

Upvotes: 3

epascarello
epascarello

Reputation: 207501

There is no language of "text/javascript", that is the type.

Change 

<script language="text/javascript">

to just

<script>

Do not worry about the language or type attributes. Language has been deprecated.

Upvotes: 3

Peter Healy
Peter Healy

Reputation: 223

It's how JSFiddle wraps up your JS. Choosing No Wrap option on left hand side will solve it for you.

Read here: no wrap

Edit: remove text/javascript

Upvotes: 0

Related Questions