Pure JS

Question

我一直在开发一段代码，现在主要使用Pure JS我不会精通JS，但我可以在合理的范围内绕过它。我正在尝试将已放置在JS创建的div中的HTML元素作为目标。

这个想法是在字符计数器达到50然后最终为0.时改变字符计数器的颜色。我试图自己实现以下代码片段但是我在尝试让它正常工作时遇到了困难。

经过网上挖掘后，我偶然发现了一个问题Stack Overflow Question。提到有必要深入挖掘有针对性的元素I.e. var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];。但是我觉得它并不适用于我，因为我没有给我创建的div提供ID或使用类。

这是我试图实施的内容，

 // create wrapper element
  this.wrapper = document.createElement("div");
  this.wrapper.innerHTML = 'Chars left: <span id="int">' + (this.MAX - input.value.length), '</span>';

// The <span></span> element is the one I am trying to adjust.

// check counter value
var tail = document.getElementById("int");

if (this.MAX - this.INPUT.value.length <= 50) {
    tail.style.color = "#ffa";
} else if (this.MAX - this.INPUT.value.length <= 0) {
    tail.style.color = "#f00";
}

您可以使用JSFiddle找到我一直在创建的完整代码段。 任何人都可以帮助我找出我在这里缺少的东西，或者告诉我是否接近这个错误？

Answer 1

看起来你需要监听输入字符的时间。这些svn.allowBranchReplacement属性未经过实时更新，因此您每次用户按键时都需要进行检查。

[svn]
    trunk = ...
    ...
    allowBranchReplacement = true

您可能还想检查.value.length的逻辑 - 长度永远不会小于零:)此外，当它超过50时你想要发生什么？

Answer 2

在此风格化：

TextAreaRanger.prototype["update"] = function() {.....}