Javascript 在已创建的元素（纯JS）中以元素为目标

我开发一段代码已经有一段时间了，现在主要使用纯JS。我对JS不是很精通，但我可以在合理的范围内绕过它。我试图将一个HTML元素作为目标，该元素已放置在JS创建的div中

这个想法是改变字符计数器的颜色，当它达到50时，最后是0。我自己也尝试过实现下面的代码片段，但是我很难让它正常工作

在网上挖了几圈后，我偶然发现了一个问题，就在这里。提到需要更深入地寻找目标元素，即

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";
}

//创建包装器元素
this.wrapper=document.createElement（“div”）；
this.wrapper.innerHTML='Chars left:'+（this.MAX-input.value.length），'；
//这个元素就是我试图调整的元素。
//检查计数器值
var tail=document.getElementById（“int”）；
如果（this.MAX-this.INPUT.value.length看起来您需要在输入中输入字符时监听。这些
.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";
    }
}

//创建包装器元素
this.wrapper=document.createElement（“div”）；
this.wrapper.innerHTML='Chars left:'+（this.MAX-input.value.length），'；
//检查计数器值
var tail=document.getElementById（“int”）；
//在事件处理程序函数中，“this”关键字改变了含义，表示事件侦听器附加到的元素。在这里重新定义变量是在处理程序中获取max的一种方法。
var max=this.max；
this.INPUT.addEventListener（'keyup'，function（）{
如果（max-this.value.length看起来您需要在输入中输入字符时监听。这些
.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";
    }
}

//创建包装器元素
this.wrapper=document.createElement（“div”）；
this.wrapper.innerHTML='Chars left:'+（this.MAX-input.value.length），'；
//检查计数器值
var tail=document.getElementById（“int”）；
//在事件处理程序函数中，“this”关键字改变了含义，表示事件侦听器附加到的元素。在这里重新定义变量是在处理程序中获取max的一种方法。
var max=this.max；
this.INPUT.addEventListener（'keyup'，function（）{
如果（max-this.value.length在此设置样式：

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

在以下方面进行样式化：

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

此
指的是什么范围？
此
指的是
窗口
对象。
此.输入
（即
窗口.输入
）除此之外，实际上不存在。输入超出范围，文档中的多个元素不能具有相同的ID，在这种情况下，您的范围都具有相同的ID，这是不允许的。其次，您肯定需要附加事件侦听器，并且仅在文本框中有更新时触发颜色更新代码。我将y为您提供一个JSFIDLE。如果您使用类，最终会遇到同样的问题，因为尝试确定您想要的跨度会非常烦人，因为使用
document.getElementsByClassName
会返回一个跨度数组。我建议您仍然使用ID路径，并通过传递唯一的编号来设置唯一的ID（就像for循环中的索引一样），然后将id设置为
'id'+this.idNum
。这样，您只需通过
document.getElementById（'id'+this.idNum）
获取尾部变量，如果需要进一步的说明，请告诉我，这有点让人困惑！因此基本上您应该这样做：
'Chars left:'+（this.MAX-input.value.length），''
但是这真的很混乱。我强烈建议使用另一种结构，即创建一个新的span，将span保存到一个变量中，并将其作为子变量附加到包装器中。这样，您就可以保存对span的引用，而不必担心再次找到它！
此
指的是什么范围？
此
指的是
窗口
对象。
此.输入
（即
窗口.输入
）除此之外，实际上不存在。输入超出范围，文档中的多个元素不能具有相同的ID，在这种情况下，您的范围都具有相同的ID，这是不允许的。其次，您肯定需要附加事件侦听器，并且仅在文本框中有更新时触发颜色更新代码。我将y为您提供一个JSFIDLE。如果您使用类，最终会遇到同样的问题，因为尝试确定您想要的跨度会非常烦人，因为使用
document.getElementsByClassName
会返回一个跨度数组。我建议您仍然使用ID路径，并通过传递唯一的编号来设置唯一的ID（就像for循环中的索引一样），然后将id设置为
'id'+this.idNum
。这样，您只需通过
document.getElementById（'id'+this.idNum）
获取尾部变量，如果需要进一步的说明，请告诉我，这有点让人困惑！因此基本上您应该这样做：
'Chars left:'+（this.MAX-input.value.length），''
但是这确实很混乱。我强烈建议使用另一种结构，即创建一个新的span，将span保存到一个变量中，并将其作为子变量附加到包装器中。这样，您可以保存对span的引用，而不必担心再次找到它！文本的颜色应保持在50以上，80%black，但我还没有告诉我的代码恢复到那个状态。谢谢你指出…：）但是var尾部设置正确吗？他正在创建多个spa