Using Function onChange

Question

I have a text input:

<input class="stops" id="stops" onchange="stopsChanged();">

And my current JavaScript looks like:

<script>
  function stopsChanged(){
    alert();
  }
</script>

But when I run my code, I get this error:

ReferenceError: stopsChanged is not defined

Why am I getting this error?

It is working perfectly fine at my end. It might be you have written some other script above this function which is not valid — Vivek Gupta, Feb 27 '15 at 09:07
The code alone should work, assuming it is all in the same page? — musefan, Feb 27 '15 at 09:07
no it's not in the same page. My javascript code is on anther page. — Nejthe, Feb 27 '15 at 09:09
then it won't work... the script and element must be there in the same page — Arun P Johny, Feb 27 '15 at 09:10
Make sure your `js file` and html file in the same location. And you should inlcude the `js` file in your `html` file — Ranjith, Feb 27 '15 at 09:11
I already did. I have many functions and all of them is working. Only this one it's not. Could it be the input with the function onchange ? — Nejthe, Feb 27 '15 at 09:12
Where you include your file ? means it is in top of the html code or bottom. My suggestion is include at the end. — Ranjith, Feb 27 '15 at 09:16
I am including my files in a php file. then in a file named confirmation.php I have my html. And my functions are in a .js file. All my functions are working. — Nejthe, Feb 27 '15 at 09:24
The code in the question [works](http://jsbin.com/kuderobojo/1/edit?html,output), whatever the problem is, it isn't caused by anything you've shown us. — Quentin, Feb 27 '15 at 09:28
You're totally right.I'm trying more to know where's my problem. — Nejthe, Feb 27 '15 at 09:33

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

You must include your JS file on the page your <input> is on like

<script type="text/javascript" src="path/to/your/file.js"></script>

Edit:

What probably happens is that you include your JS file after the <input> is loaded in the DOM. This way HTML tries to access your function before it's even there. Try to put your <script> in the <head> of your HTML and make sure it isn't in a .ready() function or something similar to it.

Source of above: Uncaught ReferenceError: myFunction is not defined

edited May 23 '17 at 12:16

Community

1
1

answered Feb 27 '15 at 09:12

Moduo

623
6
17

@Nejthe I did more research and edited my answer according to what I've found. – Moduo Feb 27 '15 at 09:26
There is no need to use an external file. There is no need to use a type attribute. Including the JS after the input doesn't matter - the HTML won't try to access the function until the event handler is fired. – Quentin Feb 27 '15 at 09:27
Check the source I've added before jumping to conclusions. – Moduo Feb 27 '15 at 09:35

FactoryAidan · Answer 2 · 2015-02-27T09:20:52.217

0

I think your problem is that you have HTML tags inside of your external javascript file. You do not need to wrap your external javascript code with html tags in the contents of the .js file.

In your HTML file though, make sure you define your script type in the opening tag if you're using an external file reference:

<script type="text/javascript" src="http://www.yoursource.com/file.js"></script>

In some browsers, it will not know how to parse the external resource without the type being defined in the opening tag.

edited Feb 27 '15 at 09:20

answered Feb 27 '15 at 09:09

FactoryAidan

2,484
1
13
13

3

Script type is optional and by default equal to text/javascript – axelduch Feb 27 '15 at 09:10
1

@aduch, If the script is defined within the brackets, then you are right. However, not if the script resource is external via a 'src' attribute in the script tag. – FactoryAidan Feb 27 '15 at 09:13
You are right for HTML<= 4 or (x)HTML, but not for HTML5. Anyways, there is rarely too much information about these kind of answers – axelduch Feb 27 '15 at 09:19
@Nejthe, The only thing I can think of is improper syntax in one of the other functions above your stopsChanged() function definition. This would be an unclosed/open bracket somewhere that is breaking the browser when it parses the external file. – FactoryAidan Feb 27 '15 at 09:33

score 0 · Answer 3 · answered Feb 27 '15 at 09:15

0

try it this way.

HTML:

<input id="stops">

JS:

document.getElementById('stops').onchange = function(){
    console.log('test');   
}

It's also better in terms of separation of function and presentation.

answered Feb 27 '15 at 09:15

Toni Feistauer

411
4
10

Using Function onChange

3 Answers3