Question

我有：

<!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

Answer 1

文档中没有名为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;

Answer 2

按照下面的说法获取按钮

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

而不是

document.colorButton.onclick = setBGColor;

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

2 个答案: