用javascript隐藏/显示html div答案

【问题标题】：hide/show html div with javascript用javascript隐藏/显示html div
【发布时间】：2014-08-02 10:25:54
【问题描述】：

我的问题还没有被问到，因为我不想知道如何在 html 中隐藏/显示 div 元素，但我想知道为什么我的方法不起作用。即使我使用了“onclick”事件，我的 javascript 函数也会执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>show&hide</title>
    <link rel="stylesheet" type="text/css" href="stile.css" />
  </head>
  <body>
    <button id="p1">show</button>
    <button id="p12">hide</button>
    <div id="scritta" class="hiddendiv">text to show</div>
    <script type="text/javascript">
      function show() {
        document.getElementById('scritta').className='visiblediv'; 
      }

      function hide() {
        document.getElementById('scritta').className='hiddendiv'; 
      }

      function inizializza() {
        var p1 = document.getElementById("p1");
        p1.onclick = show();
        var p2 = document.getElementById("p2");
        p2.onclick = hide();
      }

      window.onload= inizializza;
    </script>
  </body>
</html>

这是我的 CSS 类：

.hiddendiv {
   display:none;
}
.visiblediv {
   display:block;
}

【问题讨论】：

你的 inizializza() 函数是否被调用？？？
是的，它是用“window.onload”方法调用的

标签： javascript html css show-hide

【解决方案1】：

您的代码中有几个问题：

第二个按钮的 ID 应该是 p2 而不是 p12。
您必须像这样分配事件处理程序
p1.onclick = show;
而不是这样
p1.onclick = show();

添加方括号将执行方法，而不是将其绑定为事件处理程序。

这是fiddle。

【讨论】：

谢谢，这符合您的建议。我不知道括号的这个功能......

【解决方案2】：

问题是您的第二个按钮的 ID 为“p12”，但在 JavaScript 代码中您正在搜索 ID 为“p2”的元素。查找此类错误的一种简单方法是使用许多浏览器中的开发人员控制台（例如，在 Google Chrome 中的菜单“开发人员 > JavaScript 控制台”中）。对于您的代码，控制台显示以下错误消息：

Uncaught TypeError: Cannot set property 'onclick' of null

连同代码第 22 行出现问题的指示。

【讨论】：

【解决方案3】：

我在您的代码中看到您正在搜索 id=p2 的元素，但是您有这个 html <button id="p12">hide</button> 尝试将其更改为 <button id="p2">hide</button>

【讨论】：

【解决方案4】：

p1.onclick = show() 中的问题。您不需要调用函数，因此固定变体：

p1.onclick = show;
p2.onclick = hide;

或者使用匿名函数：

p1.onclick = function() {
    show();
}
p2.onclick = function() {
    hide();
}

更好地使用addEventListener - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener。

【讨论】：

【解决方案5】：

把inizializza改成这个：

function inizializza() {
   var p1 = document.getElementById("p1");
   p1.onclick = show;
   var p2 = document.getElementById("p2");
   p2.onclick = hide;
}

按钮定义如下：

<button id="p1">show</button>
<button id="p2">hide</button>

【讨论】：

【解决方案6】：

如果您只想在单击“显示按钮”时显示文本并在单击“隐藏按钮”时隐藏，您不想使脚本复杂化。只需在显示按钮中添加 show() 并在隐藏按钮中添加 hide() 作为 onclick 事件。这是代码。

<style>
    .hiddendiv {display:none;}
    </style>

function show() {document.getElementById('scritta').style.display="block";} 函数 hide() {document.getElementById('scritta').style.display="none";}

我不确定这是否是您的需要...但是请检查...祝您好运...

【讨论】：