时间戳

首页 > 解决方案 > 用于显示和隐藏 html div 的 javaScript 函数不起作用

javascript - 用于显示和隐藏 html div 的 javaScript 函数不起作用

问题描述

我承认我已经有 20 年没有做过 javaScript 或 html 了，而且我已经忘记了很多。这个html页面有什么问题？它显示一个按钮和两个 div 块。在第一次单击时，两个 div 都应该消失。第一个 div 应该出现在下次单击时。两个 div 都应该出现在第三次点击时。随后的单击应重复该循环。当我单击按钮时没有任何反应。

function myFunction(namesDiv, valuesDiv) {

  var nD = document.getElementById(namesDiv);
  var vD = document.getElementById(valuesDiv);
  if (vD.style.display ==== "none") {
    vD.style.display ==== "block";
    nD.style.display ==== "none";
  } else if (nD.style.display ==== "none") {
    nD.style.display ==== "block";
  } else {
    nD.style.display ==== "none";
    vD.style.display ==== "none";
  }
}
<html>
<button onclick="myFunction(\"divID0.955919\",\"divID0.956012\")"> Report Outline</button>
<div id="divID0.956012">
  <p>Image goes here</p>
  <p>Comment goes here</p>
</div>
<div id="divID0.955919">
  <ul>
    <li>Bull Pucky1 </li>
    <li>Bull Pucky2 </li>
  </ul>
</div>
</html>

标签： javascripthtmlfunction

解决方案

As====不是 javascript 中的有效运算符

你的功能应该是

function myFunction(namesDiv, valuesDiv) {

  var nD = document.getElementById(namesDiv);
  var vD = document.getElementById(valuesDiv);
  if (vD.style.display == "none") {
    vD.style.display = "block";
    nD.style.display = "none";
  } else if (nD.style.display == "none") {
    nD.style.display = "block";
  } else {
    nD.style.display = "none";
    vD.style.display = "none";
  }
 }

这应该是你的 html

<button onclick="myFunction('divID0.955919','divID0.956012')"> Report Outline</button>
<div id="divID0.956012">
    <p>Image goes here</p>
    <p>Comment goes here</p>
</div>
<div id="divID0.955919">
    <ul>
        <li>Bull Pucky1 </li>
        <li>Bull Pucky2 </li>
    </ul>
</div>

查看javascript 运算符以获取详细信息

推荐阅读