奇怪的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

找到解決方案，這是命名結構中的一個錯誤。 忽略/刪除問題。 謝謝