Question

我正在尝试编写这个基本的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>

Answer 1

从技术上讲，代码唯一的问题是onClick。 on-event handlers通常全部用小写字母书写。所以你需要做h1tag[0].onclick = changeColor。

请注意，通常不建议使用这些事件处理程序。它们非常有限，使用它们通常被认为是不好的风格。相反，您应该使用addEventListener来注册事件处理程序。这看起来像这样：

h1tag[0].addEventListener('click', changeColor);

load window事件也是如此。在这里，您正确使用onload注册您的事件处理程序，因此这将正常工作。但同样，你也应该在这里使用addEventListener。

您通常也应该避免分配这样的全局变量。分配给先前未声明的变量通常被视为错误（并且将在许多编辑器中引起警告）。原因是分配给未声明的变量会将变量添加为window的全局变量。在您的情况下，这完全您想要做什么，但是为了好的风格，您应该明确说明并直接引用window上的成员：window.onload。< / p>

使用load事件是一种非常安全的方法，可确保代码仅在文档完全就绪时运行。但是，加载事件实际上运行得很晚，并且根据您的文档和您想要做的事情，它可能太晚，使您错过了第一次用户交互。通常，您希望提前运行代码。一种非常简单的方法是在您想要使用的DOM元素之后简单地在文档中包含<script>。一个非常常见的解决方案是将其放在<body>元素的底部。然后你可以直接运行代码，而不必将其延迟到某个事件。

总的来说，它看起来像这样：

＆＃13;

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

＆＃13;

Answer 2

你走了！

function init() {
  var h1tag = document.getElementsByTagName("h1")
  h1tag[0].onClick = changeColor(h1tag[0])
}


function changeColor(elm) {
  elm.innerHTML = "Click Again"

  var randomColor =  "#"+Math.floor(Math.random()*16777215).toString(16)

  elm.style.color = randomColor
}


window.onload = init()

<!DOCTYPE html>
<html>
  <head>
    <title>Html by banas</title>
  </head>
  <body>
    <h1 onclick="changeColor(this)">Change with a click</h1>
  </body>
</html>

Answer 3

使用addEventListener而不是onClick。

将您的初始化函数更改为以下内容：

function init() {

    var h1tag = document.getElementsByTagName("h1")
    h1tag[0].addEventListener('click', changeColor)

}


function changeColor() {
    this.innerHTML = "Click Again"

    var randomColor =  "#"+Math.floor(Math.random()*16777215).toString(16)

    this.style.color = randomColor
}


onload =  init

Answer 4

onclick应为小写：

h1tag[0].onclick = changeColor

点击颜色变化 - 不工作

4 个答案: