奇怪的javascript行为，在一个页面上工作，而不是在另一个页面上工作。

Question

我有一个简单的代码，这是从一个答案在这里的另一个问题，这是完美的工作在第一页-一个html形式-我已经使用了它。代码是对文本框输入字段中的计数报告文本进行计数和适当着色。下面是页面html的示例：

<..snip..>
  <tr>
   <td></td>
   <td><span class="h3">5.2</span>Please detail the travel and associated accomodation costs required for the international speaker(s) to attend the conference.<br>
   <textarea id="input_5_2" name="input_5_2" class="large" placeholder="Please detail the travel and associated accomodation costs required for the international speaker(s) to attend the conference" maxlength="1000" required><?=$input_5_2?></textarea><br>
   <span id="count_5_2" class="count"></span>
   <span id="errorText_5_2" class="errorOutput"></span></td>
   <td class="top"><br><span id="resultImg_5_2"></span></td>
  </tr>
<..snip..>

所以这个特定部分的相关JS。它驻留在一个加载在头部中的文件中：

// Character counting and warning JS functions
$(window).load(function() {
    var countChars = function(input, counter, maxCount) {
        var diff = (maxCount - $(input).val().length), color = 'ff0000';
        if (diff > maxCount * 0.20) {  /* 500/2500 */
            color = '55a500';
        } else if (diff > maxCount * 0.04) { /* 100/2500 */
            color = 'ff6600';
        }
        $(counter).html('<span style="color: #' + color + ';">Characters remaining: ' + diff + '</span>');
    };

    countChars('#input_5_2','#count_5_2', 1000);
    $("#input_5_2").keyup(function() { countChars(this, '#count_5_2', 1000) } );

});

我已经从代码中删除了其他文本输入字段引用，因为它们对于演示正在发生的事情并不是很重要。这个很好用。在这页上。但是，当我对另一个具有不同形式的页面使用完全相同的JS代码时，它就无法工作。

不工作的版本如下所示(这次提供了完整的代码)：

// Character counting and warning JS functions
$(window).load(function() {
    var countChars = function(input, counter, maxCount) {
        var diff = (maxCount - $(input).val().length), color = 'ff0000';
        if (diff > maxCount * 0.20) {  /* 500/2500 */
            color = '55a500';
        } else if (diff > maxCount * 0.04) { /* 100/2500 */
            color = 'ff6600';
        }
        $(counter).html('<span style="color: #' + color + ';">Characters remaining: ' + diff + '</span>');
    };

    countChars('#input_themeAndPurpose','#count_themeAndPurpose', 2500);
    $("#input_themeAndPurpose").keyup(function() { countChars(this, '#count_themeAndPurpose', 2500) } );

    countChars('#input_activsAndOutcomes','#count_activsAndOutcomes', 2500);
    $("#input_activsAndOutcomes").keyup(function() { countChars(this, '#count_activsAndOutcomes', 2500) } );

    countChars('#input_benefitToPriSec','#count_benefitToPriSec', 2500);
    $("#input_benefitToPriSec").keyup(function() { countChars(this, '#count_benefitToPriSec', 2500) } );

    countChars('#input_fitAGsStraObj','#count_fitAGsStraObj', 2500);
    $("#input_fitAGsStraObj").keyup(function() { countChars(this, '#count_fitAGsStraObj', 2500) } );

    countChars('#input_support','#count_support', 2500);
    $("#input_support").keyup(function() { countChars(this, '#count_support', 2500) } );

    countChars('#input_dessemination','#count_dessemination', 2500);
    $("#input_dessemination").keyup(function() { countChars(this, '#count_dessemination', 2500) } );

});

我没有收到可以理解的错误消息来区分这两种代码之间的差异。我唯一的错误是：

Timestamp: 2/03/2015 9:28:31 a.m.
Error: TypeError: $(...).val(...) is undefined
Source File: http://callisto/www/domain/js/app_VisFelAp.js
Line: 782

在上面的代码中，它显示为这一行：

var diff = (maxCount - $(input).val().length), color = 'ff0000';

有人能向我解释我缺少的是什么吗?为什么完全相同的代码在一个页面中工作得很好，而在另一个页面中失败呢？

Answer 1

找到解决方案，这是命名结构中的一个错误。忽略/删除问题。谢谢