Javascript: ReferenceError

javascriptjavascript-eventsjquery

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.

Thanks

EDIT

Rob W is correct, I've already tried brackets, they're irrelevent in sorting this problem. thanks anyway!

Best Answer

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

Related Topic