非常不寻常的 JavaScript 行为答案

【问题标题】：Very unusual JavaScript behaviour非常不寻常的 JavaScript 行为
【发布时间】：2009-11-13 15:18:46
【问题描述】：

这是我已经使用了很长时间的东西，突然间我得到了这些奇怪的行为，也许有人知道原因？这是我的 HTML：

<div class="tooltip" id="tooltip"></div>

<input type="button" name="hide" value="hide" onclick="hide('tooltip');" />
<input type="button" name="show" value="show" onclick="show('tooltip');" />

这是 HTML 代码下面的 JavaScript：

    <script type="text/javascript">
        function hide(id)
        {
            document.getElementById(id).style.display = 'none';
        }
        function show(id)
        {
            document.getElementById(id).style.display = '';
        }
    </script>

现在这段代码应该没有任何问题。它应该在每次单击按钮时隐藏或显示工具提示。现在发生的奇怪事情是，当我单击隐藏按钮时，它会自行隐藏，而当我单击显示时，什么也没有发生。隐藏仍然隐藏。

有没有人遇到过类似的问题？有解决办法吗？也许另一种方法可以完成同样的事情（纯 JavaScript）？

更新：将其更改为阻止，仍然无法正常工作。我的意思是，当没有任何连接时，为什么它会隐藏我单击的按钮？顺便说一句，我正在使用最新的 Firefox。我在同样的功能中添加了警报。这是重写的代码：

function hide(id)
{
    alert(id);
    document.getElementById(id).style.display = 'none';
}
function show(id)
{
    alert(id);
    document.getElementById(id).style.display = 'block';
}

【问题讨论】：

作为 w3 验证器 (validator.w3.org) 并确保您的标记有效...然后回来告诉我们。
您将答案标记为已接受。最终解决了什么？
是的，下面这篇文章就是解决方案。

标签： javascript html

【解决方案1】：

似乎没有任何明显的东西会使它无法正常工作。我猜有某种错字、未封闭的标签或函数等。尝试在这两个函数中添加alert() 以查看这些函数是否被正确调用。

编辑： 根据您对问题的最新编辑，我倾向于在页面上存在具有相同 ID 的另一个项目。见this question。

要尝试的另一件事：在您的show 函数中，设置display 属性后，尝试对display 属性执行alert 以查看其实际设置为：

alert(document.getElementById(id).style.display);

【讨论】：

【解决方案2】：

当我复制粘贴您的代码并将其加载到谷歌浏览器中时，效果非常好。您可能在原始页面中有错字。

【讨论】：

Jauco，不，我只是复制/粘贴在这里
是的，我的意思是整个页面。就像嵌套错误的标签或具有相同 ID 的其他项目一样。从接受的答案中，我推测最后一个是这种情况。

【解决方案3】：

我相信 display="none" 的反面是 display="inline" 或 display="block" 取决于你希望它如何显示

【讨论】：

display = '' 可以正常工作。这就像有一个未指定 display 属性的 CSS 规则（与设置 display = 'none' 的情况相比）。

【解决方案4】：

我没有发现您编写的代码有什么特别错误，但您可能想尝试在 show 函数上将显示设置为“阻止”。

【讨论】：

【解决方案5】：

我敢打赌，有两个 ID 为“工具提示”的元素。

【讨论】：

那么getElementById() 应该在每次调用时返回相同的值。毕竟这是确定性的:)

【解决方案6】：

您需要将显示类型设置回块：

<script type="text/javascript">

              function hide(id)
              {
              document.getElementById(id).style.display = 'none';
              }
              function show(id)
              {
              document.getElementById(id).style.display = 'block';                
              }

    </script>

【讨论】：

OP 的脚本在 Firefox 3.5 中为我工作，但我实际上会像这里的高级椰子一样使用 display = "bock"。

【解决方案7】：

正如其他人所说，您可能希望在显示时切换到“阻止”。除此之外，如果它默认隐藏，它必须被内联样式隐藏。如果您使用放置在外部 css 文件中的代码隐藏它，您将无法使用 javascript 再次显示它。

【讨论】：

虽然根据测试用例描述，这根本不是发生的事情。好吧，那没关系。

【解决方案8】：

检查 display='block' 的东西 - 也许你的 css 为 .tooltip 类指定了 display='none'？
使用alert() 测试您的代码，或使用一些调试器并在show() 函数中设置断点。

【讨论】：

我检查了将其设置为阻止，并且在 tolltip css 中没有只有高度、宽度和背景没有显示设置

【解决方案9】：

我认为您的代码有效。但是你的toptip DIV里面什么都没有，这就是为什么你觉得DIV没有显示的原因。

在你的 DIV 中写一些东西。

第二部分，我的意思是通过单击隐藏按钮本身。就像您的代码一样，这似乎是不可能的。

【讨论】：

【解决方案10】：

由于您使用的是 Firefox，您可以查看 Firefox 的“错误消息控制台”。打开工具并从那里选择它。从这里你可以看到你的 JavaScript 失败的地方，如果它失败了。

【讨论】：

【解决方案11】：

您可以尝试将分号放在功能块的末尾，就在右大括号之后。

我发现如果没有它们，我的功能将无法正常工作并且出现非常不寻常的行为。

【讨论】：