Javascript 更改`setInterval'内元素的背景色`

我试图通过使用document.getElementByIdh1.style使元素的颜色每300毫秒改变一次，并使其成为一个随机颜色的变量，但它似乎不起作用

这是我的密码：

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var newColor = getRandomColor();
function color() {
    document.getElementById("h1").style = "backgroundColor = " + newColor;
    setTimeout(color(), 300)
}

函数getRandomColor{ 变量字母='0123456789ABCDEF'； var color=； 对于变量i=0；i<6；i++{ 颜色+=字母[Math.floorMath.random*16]； } 返回颜色； } 功能色{ document.getElementByIdmyH1.style.backgroundColor=getRandomColor； //如果要按标记名查询元素 //document.getElementsByTagNameh1[0]。style.backgroundColor=getRandomColor； setTimeoutcolor，300 }; myH1{ 过渡：所有0.3秒缓解； } 测试 函数getRandomColor{ 变量字母='0123456789ABCDEF'； var color=； 对于变量i=0；i<6；i++{ 颜色+=字母[Math.floorMath.random*16]； } 返回颜色； } 功能色{ document.getElementByIdmyH1.style.backgroundColor=getRandomColor； //如果要按标记名查询元素 //document.getElementsByTagNameh1[0]。style.backgroundColor=getRandomColor； setTimeoutcolor，300 }; myH1{ 过渡：所有0.3秒缓解； } 试验改变

到

此代码未经测试，但backgroundColor是style的一个属性，因此它应该是style.backgroundColor而不是style=backgroundColor

编辑

正如另外一个答案所提到的，h1不能是getElementById的属性，因此请为h1指定一个Id或使用其他方法选择它。

更改

document.getElementById("h1").style = "backgroundColor = " + newColor;

到

此代码未经测试，但backgroundColor是style的一个属性，因此它应该是style.backgroundColor而不是style=backgroundColor

编辑

还有一个答案提到，h1不能是getElementById的属性，因此请为h1指定一个Id或使用其他方法选择它。

一些指针：

您不能使用标记名h1作为getElementById的参数，除非您在HTML中设置了一个，我建议您重命名它

您需要使用element.style.backgroundColor=newColor来更新CSS样式

将函数传递给setTimeout时，需要省略颜色后的括号，否则传递的是该函数的返回值

你应该在你的颜色函数中调用getRandomColor，这样你每次都会得到不同的颜色

您可以使用setInterval，而不是在color内部递归调用setTimeout，而且由于setInterval可以向回调函数传递额外的参数，因此不需要将参数保存在全局变量中

编辑：通过使用JavaScript的本机十六进制字符串转换：number.toString 16，可以大幅缩短getRandomColor函数

演示片段： 函数getRandomColor{ 返回+ '000000'+Math.random*0x1000000.toString 16 .切片-6 } 功能颜色标题{ heading.style.backgroundColor=getRandomColor } setIntervalcolor，300，document.getElementById'heading' 标题几点提示：

您不能使用标记名h1作为getElementById的参数，除非您在HTML中设置了一个，我建议您重命名它

您需要使用element.style.backgroundColor=newColor来更新CSS样式

将函数传递给setTimeout时，需要省略颜色后的括号，否则传递的是该函数的返回值

你应该在你的颜色函数中调用getRandomColor，这样你每次都会得到不同的颜色

您可以使用setInterval，而不是在color内部递归调用setTimeout，而且由于setInterval可以向回调函数传递额外的参数，因此不需要将参数保存在全局变量中

编辑：通过使用JavaScript的本机十六进制字符串转换：number.toString 16，可以大幅缩短getRandomColor函数

演示片段： 函数getRandomColor{ 返回+ '000000'+Math.random*0x1000000.toString 16 .切片-6 } 功能颜色标题{ heading.style.backgroundColor=getRandomColor } setIntervalcolor，300，document.getElementById'heading' 标题

document.getElementById("h1").style.backgroundColor = + newColor;

function getRandomColor() {
   var letters = '0123456789ABCDEF';
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

setInterval(function() {
   document.getElementsByTagName('h1')[0].style.backgroundColor = getRandomColor();
}, 300)