Question

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

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

请解释我在这里做错了什么

    <!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复制了此代码，然后进行了编辑。

Answer 1

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

onoff.style.background ="#FF0000"

而不是

onoff.bgcolor="#FF0000"

Js Fiddle

Answer 2

您只需要更改颜色的语法：

onoff.bgcolor = "#FF0000"
onoff.bgcolor = "#32CD32"

为：

onoff.style.backgroundColor = "#FF0000"
onoff.style.backgroundColor = "#32CD32"

<强> jsFiddle example

尝试更改按钮的颜色onclick

2 个答案: