在JavaScript中单击后使图像消失

我正在学习一门叫做“JavaScript教程”的很酷的JavaScript课程。视频说明显示了一些我没有看到的事情。我们应该做的是点击一个带有HTML标签

logo

的图像使其消失，然后点击一个写着“获取logo”的按钮将其带回来

以下是我在整个课程中构建的

jstut.html

文件的摘录：

正文{字体大小：1.6em；}
.hidden{显示：无；}
.show{display:inLine！重要；}
钮扣{
边框：2倍纯黑；背景：#ESE4E2；
字体大小：.5em；字体大小：粗体；颜色：黑色；
填充：.8em2em；
边缘顶部：.4em；
}
获取徽标
document.getElementById（'logoButton'）。onClick=函数（事件）{
document.getElementById（'logo'）.className=“show”；
}
document.getElementById（'logo'）.onClick=函数（事件）{
document.getElementById（'logo'）.className=“隐藏”；
}		  

您的代码与您提到的教程几乎完全匹配。您的不同之处在于，您一直在调用

。onClick

您应该在哪里设置：

请注意

document.getElementById（'logoButton'）。onclick=函数（事件）{
document.getElementById（'logo'）.className=“show”；
}
document.getElementById（'logo'）.onclick=函数（事件）{
document.getElementById（'logo'）.className=“隐藏”；
}

正文{
字号：1.6em；
}
.隐藏{
显示：无；
}
.表演{
显示：内联！重要；
}
钮扣{
边框：2件纯黑；
背景：#ESE4E2；
字体大小：.5em；
字体大小：粗体；
颜色：黑色；
填充：.8em2em；
边缘顶部：.4em；
}

获取徽标

在显示和隐藏元素之间切换的最佳方法是使用jQuery toggleClass函数

$（'#logoButton'）。单击（函数（）{
$（'#logo'）。toggleClass（'隐藏'）
});
正文{
字号：1.6em；
}
.隐藏{
显示：无；
}
#标识按钮{
显示：块；
边缘底部：10px；
}
钮扣{
边框：2件纯黑；
背景：#ESE4E2；
字体大小：.5em；
字体大小：粗体；
颜色：黑色；
填充：.8em2em；
边缘顶部：.4em；
}

获取徽标
javascript区分大小写，它是
onclick
而不是
onclick
@host\u 255您在html文件头引用的jstut.js文件中有什么？我投票决定关闭。此代码的唯一（功能）问题是
onclick
语法/区分大小写问题。这正是它的原委。讲师在Mac上使用.onClick，而这些函数在Chrome上运行。我不太明白。但是，.onclick很好用@Makyen@TomGillardjstut.js文件包含一行代码，该代码在视频前面的jstut.html文件中使用过，我将其注释掉，与此问题无关。。大约1小时2分29秒后，您将看到讲师使用了
onClick
，它在Mac上的Chrome上工作。我正在使用Windows 7 Home Premium、Firefox、Chrome、IE等。我不知道这是否有什么区别，也不知道为什么
onClick
对他有效，但对我无效。我觉得这是我应该知道的。你知道吗@罗宾·詹姆斯Kerrison@host_255那
onClick
一定是一个不幸的打字错误。在1:02:49，您将看到，在一个奇怪的跳转切割之后，它确实显示了
onclick
。这可能是一个时刻，谢谢你。我同意JQuery更好。本课程不教授JQuery。我还有另外一个6小时的视频教程，我想JQuery是我下一个要学习的课程。非常感谢。当问题文本和OP的注释都不包含OP使用jQuery的任何提示时，为专门标记为JavaScript而不是jQuery的问题提供jQuery解决方案会适得其反。
document.getElementById('logoButton').onclick = function(event) {
   document.getElementById('logo').className = "show";
}

document.getElementById('logo').onclick = function(event) {
    document.getElementById('logo').className = "hidden";
}