试图让按钮被点击时出现一个div

这里是代码，首先为什么div显示时，我把它的显示值设置为“无”;并有任何其他我需要修复，以使div出现在我点击按钮时？感谢试图让按钮被点击时出现一个div

HTML

<button onclick="openTest()">Try it</button> 

<div id="test"> 
</div>

CSS

#test { 
    width: 500px; 
    height: 500px; 
    background-color: lightblue; 
}

document.getElementById("test").style.display ="none"; 

function openTest() { 
    document.getElementById("test").style.display = "block"; 
}

来源

2016-03-07 Johan Karlsson

这里是一个小提琴https://jsfiddle.net/SnubbenGuden/6092dquv/4/ –

你的功能没有被调用。在javascript中将diviner添加到div中。 –

对于您在本网站上提出的所有问题，请点击此处查看：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – baao

不要使用内嵌的JavaScript - 附加一个事件监听器来代替，并确保要么把你的代码在window.onload = function() {}或之前关闭</body>吨股份公司。这种方式将在脚本运行时找到您的元素。 Try this code：

HTML：

<button id="btn">Try it</button> 

<div id="test"> 
</div>

JS：

document.getElementById("test").style.display ="none"; 

function openTest() { 
    document.getElementById("test").style.display = "block"; 
} 

document.getElementById('btn').addEventListener('click', openTest);

来源

2016-03-07 20:21:35 baao

完美，感谢的人！ –

作为mmm already noted，主要的问题是你的小提琴的执行，可能的话，你真正的代码的顺序。

基本上在执行JS之前解析了HTML，所以首先找不到openTest。然后，当你的JS被解析时，定义了openTest，但很可能你的代码实际上被封装在一个函数中而不会泄露全局变量。结果，openTest不能再次访问。

修复它可能是那样简单：https://jsfiddle.net/6092dquv/18/ - 明确地露出openTest功能通过改变 function openTest() { 到 window.openTest = function() {

它绑定到全局window对象，但它是一个不好的做法，你漏全球并且在HTML中混合使用表示和逻辑（HTML和JS）。

所以好的实践是在上述答案：抓住你的按钮，分配处理程序，并在一个地方做你的逻辑 - 在JS。如果可能的话，如果用户没有JS（这并不意味着他禁用了它 - 这意味着，例如，JS文件仍然为他加载！），那么该按钮应该是一个常规的表单处理服务器端。如果这不是一个选项，那么从JS中以编程方式插入按钮，所以他从来没有看到一个不起作用的东西。

来源

2016-03-07 20:41:09 ikari

试图让按钮被点击时出现一个div

回答

相关问题