Javascript：参考错误

Question

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

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

ReferenceError: changingNow is not defined

在野生动物园中，它说

  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/

文档

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

Answer 2

可能是您在插入 <input> 字段之后定义了 function changingNow()，并且因为您没有执行 onchange 而是将其分配给 onchange（changingNow() 与 changingNow），所以您最终会将其分配给undefined

Answer 3

您可以通过为您的应用提供一个全局命名空间然后显式调用该方法来解决此问题：

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

然后在你的 HTML 中：

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

Answer 4

先生们（和女士们？？）我们的问题似乎已经解决了。可悲的是，我的问题是 <script type="text/javascript"> 省略了“文本”。

不过，还是有解决办法的。似乎 () 是必要的，但我感谢 Chris 的出色回答，而且他关于 getelementbyid 的 cmets 确实是正确的。

你的等等，