Javascript 无法读取属性'；风格'；在onmouseover上使用我的ChangeColor函数时为空_Javascript_Css

Javascript 无法读取属性'；风格'；在onmouseover上使用我的ChangeColor函数时为空

javascript css

Javascript 无法读取属性'；风格'；在onmouseover上使用我的ChangeColor函数时为空,javascript,css,Javascript,Css,我第一次尝试在MouseOver上运行，当我的函数执行时，我不断得到错误。我错过了什么未捕获的TypeError:无法读取null的属性“style” 在ChangeColor（index.html:55）在htmldevelment.onmouseover（index.html:42）蒂姆·纽菲尔德之家身体{ 边际：0px；填充：0px；背景颜色：灰色； } titlebar先生{ 位置：固定；顶部：0px；左：0px；宽度：100%；高度：50px；背景色：rgb（0

我第一次尝试在MouseOver上运行，当我的函数执行时，我不断得到错误。我错过了什么

未捕获的TypeError:无法读取null的属性“style” 在ChangeColor（index.html:55）在htmldevelment.onmouseover（index.html:42）


蒂姆·纽菲尔德之家
身体{
边际：0px；
填充：0px；
背景颜色：灰色；
}
titlebar先生{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
高度：50px；
背景色：rgb（0,0,0）；
字体系列：佐治亚州，'泰晤士报新罗马'，泰晤士报，衬线；
}
.标题栏名称{
文本对齐：右对齐；
位置：固定；
顶部：2个；
右：0px；
颜色：浅蓝色；
字体大小：250%；
宽度：240px；
}
.leftLinkBar{
位置：固定；
顶部：50px；
高度：5000px；
宽度：200px；
背景色：rgb（121,0,0）；
颜色：#B83DBC；
}
蒂姆·纽菲尔德
测试
函数ChangeColor（）{
var cArray=[1,2,3,4,5,6,7,8,9,0，“A”、“B”、“C”、“D”、“E”、“F”]；
var c=“#”；
对于（i=0；i<6；i++）{
c=c+cArray[Math.floor（Math.random（）*16）]
}
控制台日志（c）；
document.getElementById（“标题栏名称”）.style.color=c；
}

您需要为元素设置一个

id

：


蒂姆·纽菲尔德之家
身体{
边际：0px；
填充：0px；
背景颜色：灰色；
}
titlebar先生{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
高度：50px；
背景色：rgb（0,0,0）；
字体系列：佐治亚州，'泰晤士报新罗马'，泰晤士报，衬线；
}
.标题栏名称{
文本对齐：右对齐；
位置：固定；
顶部：2个；
右：0px；
颜色：浅蓝色；
字体大小：250%；
宽度：240px；
}
.leftLinkBar{
位置：固定；
顶部：50px；
高度：5000px；
宽度：200px；
背景色：rgb（121,0,0）；
颜色：#B83DBC；
}
蒂姆·纽菲尔德
测试
函数ChangeColor（）{
var cArray=[1,2,3,4,5,6,7,8,9,0，“A”、“B”、“C”、“D”、“E”、“F”]；
var c=“#”；
对于（i=0；i<6；i++）{
c=c+cArray[Math.floor（Math.random（）*16）]
}
控制台日志（c）；
document.getElementById（“标题栏名称”）.style.color=c；
}

您使用的是getElementById，但没有任何具有此id的元素，只有具有此类的元素。当然。我不知道我是怎么错过的。谢谢。@TimNeufeld不客气。请将答案标记为解决方案。

<!DOCTYPE html>
<html>
    <head>
        <title>Tim Neufeld - Home</title>
        <style type="text/css">
            body {
                margin: 0px;
                padding: 0px;
                background-color: gray;
            }
            .titlebar {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 50px;
                background-color: rgb(0, 0, 0);
                font-family: Georgia, 'Times New Roman', Times, serif;

            }
            .titlebar-name {
                text-align: right;
                position: fixed;
                top: 2px;
                right:0px;
                color: lightblue;
                font-size: 250%;
                width: 240px;
            }
            .leftLinkBar {
                position: fixed;
                top: 50px;
                height: 5000px;
                width: 200px;
                background-color: rgb(121, 0, 0);
                color: #B83DBC;
            }
        </style>
    </head>
    <body>
        <div class="titlebar">
            <div onmouseover="ChangeColor()" class="titlebar-name">Tim Neufeld</div>     
        </div>
        <div class="leftLinkBar">
            testing
        </div>
        <script type="text/javascript">
            function ChangeColor() {
                var cArray = [1,2,3,4,5,6,7,8,9,0,"A","B","C","D","E","F"];
                var c = "#";
                for (i=0; i < 6; i++) {
                    c = c + cArray[Math.floor(Math.random() * 16)]
                }
                console.log(c);
                document.getElementById("titlebar-name").style.color = c;
            }
        </script>
    </body>
</html>