变量(元素).风格没有定义

Question

<textarea id="textarea" rows="10" cols="50" maxlength="10"></textarea>
<span id="counter">10</span>
<script>
let textArea=document.getElementById('textarea'),
counter=document.getElementById('counter'),
number=counter.innerHTML;
textArea.oninput=function(){
counter.innerHTML=number-textArea.value.length;
if(number==0){
number.style.color="red";//number.style is undefined
}else{
number.style.color="black";
}
}
</script>

为什么说变量(元素)。风格未定义?我试过。style.color="red";在不同的代码&它的工作原理!

Answer 1

• 首先您必须与counter进行比较。因为你更新了它的值。
  counter的值不会改变，一直是10，如下面的代码片段所示。

• number的值为counter.innerHTML;

---

number=counter.innerHTML;

这意味着它没有样式。属性，而应该设置样式。计数器元素的颜色。

<textarea id="textarea" rows="10" cols="50" maxlength="10"></textarea>
<span id="counter">10</span>
<script>
let textArea=document.getElementById('textarea'),
counter=document.getElementById('counter'),
number=counter.innerHTML;
textArea.oninput=function(){
counter.innerHTML=number-textArea.value.length;
if(counter.innerHTML==0){
counter.style.color="red";//number.style is undefined
}else{
counter.style.color="black";
}
}
</script>

Answer 2

补充Scott Marcus的评论:您让number的值为span的第一个值，即10。它不会随着输入而改变。所以在if语句中使用它是没有用的因为它总是10。相反，你应该使用counter。

let textArea=document.getElementById('textarea'),
counter=document.getElementById('counter'),
number=counter.innerHTML;
textArea.oninput=function(){
counter.innerHTML=number-textArea.value.length;
if(counter.innerHTML==0){
counter.style.color="red";//number.style is undefined
console.log("here");
}else{
counter.style.color="black";
console.log("there");
}
}

<textarea id="textarea" rows="10" cols="50" maxlength="10"></textarea>
<span id="counter">10</span>

Answer 3

编辑:说明

我猜你想在输入长度达到10个字符时给用户反馈。

下面的代码段初始化了你的常量:textarea, counter和number。

number使用内置Number函数类型转换为int类型。然后在textarea输入上设置本地变量current以保存公式的结果:maxchars(number) - inputchars(textarea).

counter与current更新，最后我使用三进制设置counter颜色为红色，如果0否则为黑色。

const textArea = document.getElementById('textarea');
const counter  = document.getElementById('counter');
const number   = Number(counter.innerHTML);
textArea.oninput = function() {
const current       = number - textArea.value.length;

counter.innerHTML   = current;
counter.style.color = current === 0 ? "red" : "black";
return;
};