JavaScript DOM 更改背景颜色未按预期工作

JavaScript DOM change background color not working as expected

本文关键字：工作 颜色 DOM 背景 JavaScript      更新时间：2023-09-26

我有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript index</title>
</head>
<body id="body">
<input name="colorButton" type="button" value="Change background color" />
<script>
"use strict";
function setBGColor() {
    document.body.style.backgroundColor = "blue";
}
document.colorButton.onclick = setBGColor;
</script>
</body>
</html>

如您所见，一旦按下按钮，我正在尝试更改身体的背景颜色。但是我收到以下错误：

Uncaught TypeError: Cannot set property 'onclick' of undefined

文档没有称为 colorButton 的属性：

document.querySelector('input[name="colorButton"]').onclick = setBGColor;

您需要获取input元素（因为您有名称使用元素名称）。

或者添加 ID：

<input name="colorButton" id="colorButton" type="button" value="Change background color" />

然后：

document.getElementById('colorButton').onclick = setBGColor;

像风箱一样说得到按钮

document.getElementsByName('colorButton')[0].onclick = setBGColor;

而不是 

document.colorButton.onclick = setBGColor;
相关文章：