代码之家 › 专栏 › 技术社区 › Luis

在javascript中隐藏/显示内容

dom-manipulation show-hide javascript

Luis · 技术社区 · 9 年前

我是一个非常新的网络开发人员。我在HTML和CSS方面做得很好,我正在学习javascript。我是一个月前的新手,我从未编写过一行代码,我已经制作了2到3个网站,但没有一个网站能够支持JS。

我知道我可以在jquery中做到这一点,而且已经做到了,但我想 了解它 我希望能够用普通javascript实现。

我正在制作一个简单的游戏来练习,它所做的就是提问,并根据点击事件将元素从display=none更改为display=block,变成两个大的YES或NO按钮。

所以……第一个针对yes_button的代码工作得很好。出现“隐藏”说明和第一个问题(Q1)。 No按钮不起作用,我也不明白为什么,它本质上是针对不同元素的相同代码。

我检查的内容: 元素id/selectors正确 camelCase良好, 没有未闭合的支架, 分号是好的,

逻辑错误在哪里?

window.onload = function() {

yes_button.onclick= function() {
document.getElementById("instructions").style.display="none";
document.getElementById("q1").style.display="block";

};


no_button.onClick=function() {
document.getElementById("instructions").style.display="none";   
document.getElementById("nointro").style.display="block";

};



};

1 回复 | 直到 9 年前

Larry Lane 9 年前

您可以移除窗口。onload函数调用。您可以将JavaScript导入放置在结束标记之前,以便在尝试单击按钮之前dom已就绪。

您的JavaScript事件应该如下所示:

document.getElementById("yes_button").onclick = function(){

             document.getElementById("instructions").style.display= "none";
             document.getElementById("q1").style.display = "block";

};


document.getElementById("no_button").onclick = function(){

            document.getElementById("instructions").style.display="none";   
            document.getElementById("nointro").style.display="block";


};

推荐文章