Javascript: ReferenceError

Question

I'm trying to call a function with onchange() in an input form.

When I check the console in Chrome, the code below returns:

ReferenceError: changingNow is not defined

In safari, it says:

ReferenceError: Can't find variable changingNow

Here's the code:

function changingNow() {
 first_name=document.getElementById(first_name);
 last_name=document.getElementById(last_name);
 username=document.getElementById(username);
 category=document.getElementById(category);
 if ((first_name!=="")&&(last_name!=="")&&(username!=="")&&(category!="empty")) {
   form1.process.disabled = false;
 }
 else {
  form1.process.disabled = true;
 }

 document.getElementById('tweet').value = 'I just voted for '+first_name+' '+last_name+'('+username+')'+'in the '+category+' category!';
 }


 First Name<input type="text" name="first_name" id="first_name" class="first_name" maxlength="50" onchange="changingNow"/><br/>

Googling this seems to indicate that jQuery is responsible, but there's no jQuery on the page.

EDIT

Rob W is correct, I've already tried brackets, they're irrelevant in sorting this problem.

I checked the error consoles on each browser. Nothing came up, in the actual browser — Niall Paterson, Jun 27 '12 at 16:47
Is your code inside a `$(document).ready(`? `changingNow` needs to be global to use it on an inline handler. — gen_Eric, Jun 27 '12 at 16:56
`$(document).ready` is irrelevant. The only thing important is to define function in a global scope. Backslap, try doing `window.changingNow = function() {` instead of `function changingNow() {` — freakish, Jun 27 '12 at 16:59
@freakish: I was asking if was in `$(document).ready(`, because it *shouldn't* be. — gen_Eric, Jun 27 '12 at 17:01
Use var! Poor global namespace! And if you are not using jQuery, why in the world would it be caused by jQuery. Yikes. — epascarello, Jun 27 '12 at 17:16

score 4 · Answer 1 · edited May 23 '17 at 10:09

There are a lot of problems in your code. For starters, the lines where you get the values of your various text fields is incorrect:

first_name=document.getElementById(first_name);

getElementById expects a string. You aren't passing a string, you're passing an as-yet undefined variable named first_name. To make it a string, give some quotes! Second, you aren't using the var keyword, which affects the scope of the variable. Lastly, with those two errors corrected, you still aren't getting the value, you're getting the element -- getElementById gives you an HTMLElementObject. Further on, you try to treat this object as a string:

first_name!==""

As it stands, first_name will never equal an empty string because it is not a string, it is an object. Putting it all together, you want instead:

var first_name=document.getElementById('first_name').value;

This will give you the value of the text field with the id "first_name" as a string.

Further on, your if statement has way too many parenthesis!

if ((first_name!=="")&&(last_name!=="")&&(username!=="")&&(category!="empty"))

These parenthesis are not necessary, instead:

if (first_name !== "" && last_name !== "" && username !== "" && category!= "empty"){ }

// or my personal preference:

if (
     first_name !== "" &&
     last_name !== "" &&
     username !== "" &&
     category!= "empty"
){ }

Finally, I would suggest removing the inline onchange event and replacing it with a javascript assignment:

document.getElementById('first_name').onchange = changingNow;

This is just one way to apply an event, see this answer for more info on that.

Putting it all together:

var changingNow = function() {
    var first_name = document.getElementById('first_name').value;
    var last_name = document.getElementById('last_name').value;
    var username = document.getElementById('username').value;
    var category = document.getElementById('category').value;
    var form1 = document.getElementById('form1');
     if (
         first_name !== "" &&
         last_name !== "" &&
         username !== "" &&
         category!= "please choose a category"
    ){
        // this line of code is not valid in regular JS...
        //form1.process.disabled = false;
        document.getElementById('tweet').value = 'I just voted for '+first_name+' '+last_name+' ('+username+')'+' in the '+category+' category!';
    } else {
        // this line of code is not valid in regular JS...
         //form1.process.disabled = true;
        document.getElementById('tweet').value = 'please complete the fields above!';
    }
}
document.getElementById('first_name').onchange = changingNow;
document.getElementById('last_name').onchange = changingNow;
document.getElementById('username').onchange = changingNow;
document.getElementById('category').onchange = changingNow;
changingNow();

Try it out here: http://jsfiddle.net/yzbWr/

Documentation

document.getElementById on MDN - https://developer.mozilla.org/en/DOM/document.getElementById
addEventListener on MDN - https://developer.mozilla.org/en/DOM/element
Variable scope cheatsheet on MDN - https://developer.mozilla.org/en/JavaScript/Reference/Scope_Cheatsheet

score 0 · Answer 2 · answered Jun 27 '12 at 16:54

0

It might be that you have function changingNow() defined AFTER you have inserted the <input> field, and because you don't execute it onchange but assign it to onchange (changingNow() vs changingNow), you end up assigining it an undefined

answered Jun 27 '12 at 16:54

mvbl fst

5,213
8
42
59

The *order* of defining is irrelevant as long as the function is defined at the point of changing. The *onchange* defined in HTML is evaluated each time the event fires. – freakish Jun 27 '12 at 16:56

score 0 · Answer 3 · answered Jun 27 '12 at 17:06

0

You could fix this by giving a global namespace to your app and then calling the method explicitly:

window.myApp = {};
window.myApp.changingNow = function(){
    // your function code here
};

And then in your HTML:

<input type="text" ... onchange="window.myApp.changingNow">

answered Jun 27 '12 at 17:06

mVChr

49,587
11
107
104

Even better idea is to define handlers only with JavaScript. – freakish Jun 27 '12 at 17:07

score 0 · Accepted Answer · answered Jun 27 '12 at 19:34

Gentlemen (and ladies??) Our issue seems to have been solved. My issue was, pathetically, that <script type="text/javascript"> was omitting the 'text'.

Nevertheless, there are solutions. It seems the () are nessecary, but my thanks to Chris' excellent answer, and indeed his comments about getelementbyid are correct.

Yours etc,

Javascript: ReferenceError

4 Answers4