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

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

奇怪的JavaScript行为，适用于一个页面，但不适用于另一个页面

1 个答案: