在创建的元素Pure JS中定位元素

Question

我一直在开发一小段代码，现在主要使用Pure JS，虽然我不精通JS，但是我可以在合理范围内解决它。 我正在尝试定位放置在JS创建的div中的HTML元素。

这个想法是当字符计数器的颜色变为50时最终变为0，然后最终变为0。我试图自己实现以下代码段，但在使它正确工作方面遇到困难。

经过一番摸索之后，我偶然发现了一个位于此处的问题Stack Overflow Question 。 提到需要更深入地寻找目标对象，即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

看起来您需要在将字符输入到输入中时进行侦听。 这些.value.length属性不会实时更新，因此您需要在用户每次按键时进行检查。

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

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

// Inside the event handler function, the "this" keyword changes meaning to mean the element on which the event listener is attached. Redefining the variable here is one way to get max inside the handler.
var max = this.MAX;

this.INPUT.addEventListener('keyup', function () {
    if (max - this.value.length <= 50) {
        tail.style.color = "#ffa";
    } else if (max - this.value.length <= 0) {
        tail.style.color = "#f00";
    }
}

您可能还想检查else if (max - this.value.length <= 0)的逻辑， else if (max - this.value.length <= 0) -长度永远不会小于零：)另外，当长度超过50时，您想发生什么？

Answer 2

在此样式化：

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