Question

尝试使用变量更改颜色，控制台可以工作，但是当我单击正方形时颜色不会更改。

颜色是我要使用的变量。

我尝试了一个实际的字符串值，但这不起作用。

<!DOCTYPE html>

<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the shapes as fast as you can</p>

        <div id="shapes">

        </div>
        <script>

            function myFunction() {

                var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));

            document.getElementById("shapes").style.backgroundColour = colour;
            console.log(colour);
            }

        </script>
    </body>
</html>

Answer 1

它的backgroundColor而不是Colour ..您有一个额外的 u

Answer 2

您需要将backgroundColour的{{1}}替换为backgroundColor：

必须是：

document.getElementById("shapes").style.backgroundColour = colour;
______________________________________________________^

注意1：：您需要触发该函数才能看到效果，并且还必须给目标div document.getElementById("shapes").style.backgroundColor = colour;一个shapes，以便您可以看到它。

注意2：：在调用脚本之前，您必须监听width/height事件以确保所有元素都已加载到DOM。

工作示例：

DOMContentLoaded

Answer 3

尝试一下

const shapes = document.getElementById("shapes"); // You declare once, then you can reuse

function myFunction() {
  var colour = '#'+((Math.random() *(1<<24)|0).toString(16).slice(-6));
  shapes.style.backgroundColor = colour;
  console.log(colour);
}
shapes.addEventListener('click', myFunction); // I guess you want to click somewhere

<h1>Test Your Reactions!</h1>
  <p>Click on the shapes as fast as you can</p>
<div id="shapes">Shapes</div>

Answer 4

下面的代码给出了预期的结果。请接受。

<!DOCTYPE html>

<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
        <style> 
            #shapes {
                width: 300px;
                height: 300px;
                background-color: coral;
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the shapes as fast as you can</p>

        <div id="shapes" onClick="myFunction();">
            test
        </div>
        <script>

            function myFunction() {
                var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
                document.getElementById("shapes").style.backgroundColor = colour;
                console.log(colour);
            }

        </script>
    </body>
</html>

尝试使用变量更改背景颜色

4 个答案: