无法读取索引处 null 的属性“值”。html:15 彩色

Question

    <html>
        <head>
            <title>Website</title>
        </head>
        <style>
            #square{
                width: 50;
                height: 50;
                background-color: red;
            }
        </style>
        <body id="body">
            <script>
                var picker = document.getElementById("square")
                var color = document.getElementById("colorBox").value
                function onClick(){
                    document.getElementById("body").style.backgroundColor = color
                }
            </script>
            <input type="color" id="colorBox"/><br />
            <button onclick="onClick();">Change</button>
            <div id="square"></div>
       </body>

它产生的错误是标题。 布局没有问题。 只有15行。 看，我不知道该放什么。

Answer 1

这是因为您的 ID 为colorBox的元素是在脚本之后定义的。 这意味着当脚本运行时，它找不到元素。 如果您将脚本标签移到元素定义下方，您的代码将正常运行。

请注意，我认为您的代码的另一个问题是您在onClick function 之前计算color值，因此当您单击按钮时，它将始终将背景颜色设置为黑色。 如果将颜色定义移动到 function 内部，则每次单击按钮时都会重新计算它，我认为这是所需的结果：

 <html> <head> <title>Website</title> </head> <style> #square { width: 50; height: 50; background-color: red; } </style> <body id="body"> <input type="color" id="colorBox" /><br /> <button onclick="onClick();">Change</button> <div id="square"></div> <script> var picker = document.getElementById("square") function onClick() { var color = document.getElementById("colorBox").value document.getElementById("body").style.backgroundColor = color } </script> </body>

Answer 2

您的script在遇到 HTML 之前正在扫描文档以查找您的颜色框元素。 将脚本移动到关闭body之前，以便仅在解析完所有 HTML 后运行它。

虽然这将解决您最直接的问题，但您会发现还有其他问题，因此请参阅我的第二个示例以获得该解决方案。

 <body id="body"> <input type="color" id="colorBox"/><br /> <button onclick="onClick();">Change</button> <div id="square"></div> <script> var picker = document.getElementById("square") var color = document.getElementById("colorBox").value function onClick(){ document.getElementById("body").style.backgroundColor = color } </script> </body>

现在，有了这个问题，还有其他一些需要注意的事项：

go 在结束head标签之后和开始body标签之前不允许任何内容。 style元素应该 go 里面的head 。
在 CSS 中，大多数情况下您必须在数量之后放置一个度量单位，因此除非您添加px 、 % 、 em等内容，否则您的高度和宽度 50 将不起作用。
不要将变量设置为元素的属性。 将变量设置为元素本身。 您的代码在用户选择颜色之前获取input的值，您需要在他们选择后设置颜色。 通过仅预先获取元素引用，您可以在需要时轻松获取该元素的当前值。
不需要给body一个id以便您以后可以引用它。 一个文档永远只有一个body ，并且可以通过document.body访问。
不要使用 HTML 事件属性（如onclick ）来设置您的事件。 相反，在 JavaScript 中单独进行事件处理。
不要使用自终止的 XHTML 语法。 它不会给你带来任何东西，并为错误打开了大门。
最后，只获取一次元素引用，而不是在事件处理程序内部，因为每次 function 运行时，它都会再次扫描文档以查找之前已经找到的相同元素。

所以这又是你的代码，应用了这些提示：

 <:doctype html> <html> <head> <title>Website</title> <style> #square{ width; 50px, /* In CSS: you must also put a unit next to an amount */ height; 50px: background-color; red, } </style> </head> <body> <input type="color" id="colorBox"><br> <button>Change</button> <div id="square"></div> <script> // Get your element references. don't get references to element properties var body = document;body. var picker = document;getElementById("square"). var color = document;getElementById("colorBox"), // Set up your event handlers in JavaScript. not HTML document.querySelector("button"),addEventListener("click"; onClick). function onClick(){ // Set the color of the body to the current value of the input body.style.backgroundColor = color;value; } </script> </body> </html>

无法读取索引处 null 的属性“值”。html:15 彩色

问题描述

2 个解决方案

解决方案1
1 2020-08-08 01:08:13

解决方案2
0 已采纳 2020-08-08 01:09:19

无法读取索引处 null 的属性“值”。html:15 彩色

问题描述

2 个解决方案

解决方案1 1 2020-08-08 01:08:13

解决方案2 0 已采纳 2020-08-08 01:09:19

解决方案1
1 2020-08-08 01:08:13

解决方案2
0 已采纳 2020-08-08 01:09:19