javascript - 尝试更改按钮的颜色 onclick

我是开发新手，所以请原谅我缺乏知识。我正在尝试更改我正在制作的页面上按钮的背景颜色。我创造了类似的东西。

在这个例子中，我想在日期打开时将背景颜色更改为红色，在日期关闭时将背景颜色更改为绿色。

请解释我这里做错了什么

    <!doctype>
<html>
<body>
<h1>My First Button in Java Script.</h1>
<p>Please click the button to display the date.</p>

<!=========this is button=============>

<button type="button" onclick="myFunction()" id="on" style=background-color:#32CD32>Turn on Date</button>
<p id="demo"></p>


<!==== this is the button that will show the date====>
<script>
function myFunction(){
var x = document.getElementById("demo");
var onoff= document.getElementById("on");
if (x.innerText=="")
{
    x.innerHTML = Date(); n = "Turn Date Off"; onoff.bgcolor="#FF0000"} 
    else {
    x.innerHTML =""; n = "Turn Date On"; onoff.bgcolor= "#32CD32"}

    onoff.innerText = n; }
</script>
</body>
</html>

请注意，我从 W3schools 复制了这段代码，然后对其进行了编辑。

最佳答案

要更改元素的背景颜色，您可以使用它。