Question

这是代码，首先为什么当我将显示值设置为“none”时div显示出来;并且有任何我需要修复的东西，以便在我点击按钮时显示div吗？感谢

HTML

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

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

CSS

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

JS

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

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

Answer 1

不要使用内联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);

Answer 2

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

基本上，HTML在JS执行之前被解析，所以首先，openTest尚未找到。然后，当你的JS被解析时，openTest被定义，但是你的代码实际上可能包含在一个不泄漏全局变量的函数中。结果，openTest无法再次访问。

修复它可能就像那样简单：https://jsfiddle.net/6092dquv/18/ - 通过更改将openTest函数显式绑定到全局window对象 function openTest() { 至 window.openTest = function() {

但这是一个不好的做法，你泄漏全局，并在HTML中混合表示和逻辑（HTML和JS）。

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

单击按钮时尝试显示div

2 个答案: