Javascript 单击时更改颜色--不起作用_Javascript

Javascript 单击时更改颜色--不起作用

javascript

Javascript 单击时更改颜色--不起作用,javascript,Javascript,我正在尝试编写这个基本的JS，其中h1标记会在单击时改变颜色。控制台没有抛出任何错误，但当我单击h1时，颜色没有改变。我不知道我错过了什么，也不知道我哪里做错了。有人能把我推到正确的方向吗函数init（）{ var h1tag=document.getElementsByTagName（“h1”） H1标记[0]。onClick=changeColor } 函数changeColor（）{ this.innerHTML=“再次单击” var randomColor=“#”+Math.floo

我正在尝试编写这个基本的JS，其中

h1

标记会在单击时改变颜色。控制台没有抛出任何错误，但当我单击

h1

时，颜色没有改变。我不知道我错过了什么，也不知道我哪里做错了。有人能把我推到正确的方向吗

函数init（）{
var h1tag=document.getElementsByTagName（“h1”）
H1标记[0]。onClick=changeColor
}
函数changeColor（）{
this.innerHTML=“再次单击”
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）
this.style.color=randomColor
}
onload=init


由banas编写的Html
点击改变

给你

函数init（）{
var h1tag=document.getElementsByTagName（“h1”）
h1tag[0]。onClick=changeColor（h1tag[0]）
}
函数更改颜色（elm）{
elm.innerHTML=“再次单击”
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）
elm.style.color=随机颜色
}
window.onload=init（）


由banas编写的Html
点击改变

给你

函数init（）{
var h1tag=document.getElementsByTagName（“h1”）
h1tag[0]。onClick=changeColor（h1tag[0]）
}
函数更改颜色（elm）{
elm.innerHTML=“再次单击”
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）
elm.style.color=随机颜色
}
window.onload=init（）


由banas编写的Html
点击改变

使用addEventListener而不是onClick

将init函数更改为以下内容：

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

使用addEventListener而不是onClick

将init函数更改为以下内容：

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

onclick

应为小写：

h1tag[0].onclick = changeColor

onclick

应为小写：

h1tag[0].onclick = changeColor

从技术上讲，您的代码唯一的错误就是

onClick

。这些字母通常用小写字母书写。所以您需要执行h1tag[0].onclick=changeColor

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

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

对于

窗口

的

加载

事件也是如此。在这里，您正确地使用了

onload

来注册事件处理程序，因此这将正常工作。但是，这里也应该使用

addEventListener

通常还应该避免这样分配给全局变量。分配给以前未声明的变量通常被认为是错误的（并且会在许多编辑器中引起警告）。原因是分配给一个未声明的变量会将该变量作为全局变量添加到

窗口

。在您的情况下，这正是您想要做的，但是为了获得好的样式，您应该将其显式化，并直接在

window

上引用成员：

window.onload

使用load事件是一种非常安全的方法，可以确保代码仅在文档完全就绪时运行。但是，加载事件实际上运行得很晚，根据您的文档和您想要执行的操作，它可能太晚了，使您错过了第一次用户交互。因此，通常情况下，您希望让代码更早地运行。一种非常简单的方法是，只需将

放在文档中要使用的DOM元素之后。一个非常常见的解决方案是将其放在

元素的底部。然后您可以直接运行代码，而不必将其延迟到某个事件

总的来说，它可能是这样的：

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


由banas编写的Html
点击改变
函数changeColor（）{
this.innerHTML=“再次单击”；
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
this.style.color=随机颜色；
}
//初始化
var h1tag=document.getElementsByTagName（“h1”）；
H1标记[0]。addEventListener（'click'，changeColor）；

从技术上讲，您的代码唯一的问题是

onClick