JavaScript:引用错误

Question

我正在尝试在输入表单中使用 onchange() 调用函数。

当我在 Chrome 中检查控制台时，返回以下代码:

ReferenceError: changingNow is not defined

在 Safari 中，它说:

ReferenceError: Can't find variable changingNow

代码如下:

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/>

谷歌搜索似乎表明 jQuery 负责，但页面上没有 jQuery。

编辑

Rob W 是正确的，我已经尝试过括号，它们与解决这个问题无关。

Answer 1

你的代码有很多问题。对于初学者来说，获取各个文本字段值的行是不正确的:

first_name=document.getElementById(first_name);

getElementById 需要一个字符串。您传递的不是一个字符串，而是一个尚未定义的名为 first_name 的变量。要使其成为字符串，请给出一些引号!其次，您没有使用 var 关键字，这会影响变量的范围。最后，纠正这两个错误后，您仍然没有获得值，而是获得了元素 - getElementById 为您提供了一个 HTMLElementObject。进一步，您尝试将此对象视为字符串:

first_name!==""

就目前情况而言，first_name永远不会等于空字符串，因为它不是字符串，而是一个对象。把它们放在一起，你想要的是:

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

这将为您提供 ID 为“first_name”的文本字段的值(字符串形式)。

此外，您的 if 语句有太多括号!

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

这些括号不是必需的，而是:

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

// or my personal preference:

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

最后，我建议删除内联 onchange 事件并用 JavaScript 赋值替换它:

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

这只是应用事件的一种方法，see this answer for more info on that .

把它们放在一起:

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();

在这里尝试一下:http://jsfiddle.net/yzbWr/

文档

MDN 上的
• document.getElementById - https://developer.mozilla.org/en/DOM/document.getElementById
MDN 上的
• addEventListener - https://developer.mozilla.org/en/DOM/element
• MDN 上的变量范围备忘单 - https://developer.mozilla.org/en/JavaScript/Reference/Scope_Cheatsheet