在Javascript不工作的情况下更改CSS_Javascript_Html_Css

在Javascript不工作的情况下更改CSS

javascript html css

在Javascript不工作的情况下更改CSS,javascript,html,css,Javascript,Html,Css,当文本长度达到一定值时，我希望输入标记内的文本更改颜色。如果我使用jquery，它工作得很好。为什么纯javascript不能实现这一点 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"&

当文本长度达到一定值时，我希望输入标记内的文本更改颜色。如果我使用jquery，它工作得很好。为什么纯javascript不能实现这一点

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            function count(x){      
                var size = x.length;    
                document.getElementById("show_length").innerHTML = size;

                if(size > 5){
                    //$("#name").css({"color":"blue"});
                    document.getElementById("name").style.color = "blue";                   
                } else {
                    //$("#name").css({"color":"red"});                  
                    document.getElementById("name").style.color = "red";    
                }   
            }

        </script>
    </head>
    <body>
        <input type="text" name="name" id="name" autofocus maxlength="50" onkeyup="count(this.value)">
        <span id="show_length">0</span>/50 *Name must be greater than 5 characters
    </body>
</html>


函数计数（x）{
变量大小=x.长度；
document.getElementById（“show_length”）.innerHTML=size；
如果（尺寸>5）{
//$（“#name”）.css（{“color”：“blue”}）；
document.getElementById（“名称”）.style.color=“蓝色”；
}否则{
//$（“#name”）.css（{“color”：“red”}）；
document.getElementById（“名称”）.style.color=“红色”；
}   
}
0/50*名称必须大于5个字符

您输入了打字错误

document.getElementById（“name”）.style.color=“blue”

和

document.getElementById（“名称”）.style.color=“红色”


函数计数（x）{
变量大小=x.长度；
document.getElementById（“show_length”）.innerHTML=size；
如果（尺寸>5）{
//$（“#name”）.css（{“color”：“blue”}）；
document.getElementById（“名称”）.style.color=“蓝色”；
}否则{
//$（“#name”）.css（{“color”：“red”}）；
document.getElementById（“名称”）.style.color=“红色”；
}   
}
0/50
因为它必须是文档
，而不是文档
：）学会使用你的控制台！当您在控制台中查看错误消息时，错误是显而易见的。我已经研究了大约30分钟。谢谢我会回到学校学习拼写…：（@John 30m并且已经启用了吗？你的IDE或控制台应该已经告诉你了你的错误。uncaughtreferenceerror:document没有定义
FWIW，我会缓存对元素的引用，而不是在每个keyup
事件上查询DOM，即getElementById（）
。我也不会使用内联事件处理程序，而是使用addEventListener（）
来分离关注点和所有关注点。下面是关于如何减少代码重复等的一些想法和其他建议。