我正在尝试编写这个基本的 JS，其中 h1 标签在点击时改变颜色。控制台不会抛出任何错误，但是当我单击 h1 时，颜色不会改变。我不明白我错过了什么或者哪里出了问题。有人可以把我推向正确的方向吗？
function init() {
var h1tag = document.getElementsByTagName("h1")
h1tag[0].onClick = changeColor
}
function changeColor() {
this.innerHTML = "Click Again"
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
this.style.color = randomColor
}
onload = init<!DOCTYPE html>
<html>
<head>
<title>Html by banas</title>
</head>
<body>
<h1>Change with a click</h1>
</body>
</html>最佳答案
从技术上讲，您的代码唯一错误的是 onClick 。 on-event handlers一般都是小写的。所以你需要做h1tag[0].onclick = changeColor .
但请注意，通常不建议使用这些事件处理程序。它们非常有限，并且使用它们通常被认为是不好的风格。相反，您应该使用 addEventListener注册事件处理程序。这看起来像这样:
h1tag[0].addEventListener('click', changeColor);
load 也是如此。事件window 。在这里，您正确使用onload注册您的事件处理程序，以便这可以正常工作。但同样，您应该使用 addEventListener这里也一样。
您通常还应该避免分配给这样的全局变量。分配给之前未声明的变量通常被认为是错误(并且会在许多编辑器中引起警告)。原因是分配给未声明的变量会将变量作为全局变量添加到 window 。就您而言，这正是您想要做的，但为了良好的风格，您应该明确说明并引用 window 上的成员。直接:window.onload .
使用加载事件是一种非常安全的方法，可以确保您的代码仅在文档完全准备好时运行。然而，加载事件实际上运行得很晚，并且根据您的文档和您想要执行的操作，它可能太晚，使您错过第一次用户交互。因此，通常，您希望让代码更早运行。一个非常简单的方法就是简单地拥有您的 <script>在文档中您要使用的 DOM 元素之后。一个非常常见的解决方案是将其放在 <body> 的底部。元素。然后您可以直接运行代码，而不必将其延迟到某个事件。
总的来说，它可能看起来像这样:
<!DOCTYPE html>
<html>
<head>
<title>Html by banas</title>
</head>
<body>
<h1>Change with a click</h1>
<script>
function changeColor() {
this.innerHTML = "Click Again";
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
this.style.color = randomColor;
}
// init
var h1tag = document.getElementsByTagName("h1");
h1tag[0].addEventListener('click', changeColor);
</script>
</body>
</html>关于javascript - 单击时颜色更改 - 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49220135/