2

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.

9
  • 1
    Where you have this code and where you call it?
    – Adil
    Jun 27, 2012 at 16:46
  • You mean you see it when you enter stuff (onchange)?
    – mvbl fst
    Jun 27, 2012 at 16:46
  • I checked the error consoles on each browser. Nothing came up, in the actual browser Jun 27, 2012 at 16:47
  • try calling the function: onchange="changingNow()" Jun 27, 2012 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, 2012 at 16:56

4 Answers 4

4

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

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

1
  • 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, 2012 at 16:56
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">
1
  • Even better idea is to define handlers only with JavaScript.
    – freakish
    Jun 27, 2012 at 17:07
0

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,

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.