Javascript 在隐藏和显示元素之间切换

我正在学习如何编程，我想用JavaScript在隐藏和显示元素之间切换。脚本如下所示。它可以工作，但我不想在程序运行后显示解决方案，而是希望将其隐藏起来，以便用户可以单击并查看解决方案。我想换一种方式。我尝试过“显示：无”，但它停止工作。我知道这很容易，但我不能让它工作。你能帮我吗

function SolutionFunction（）{
var x=document.getElementById（“解决方案”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

#解决方案{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

试试看
这就是解决办法。

默认情况下，当您使用

x.style.display

获取参数时，

display

参数为空，因为它只查看元素属性，而不查看CSS样式。所以你可以检查它是否是空的

您需要删除

id

周围的空格以使其正常工作

function SolutionFunction（）{
var x=document.getElementById（“解决方案”）；
如果（x.style.display==“”）{
x、 style.display=“block”；
}否则{
x、 style.display=“”；
}
}

#解决方案{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
显示：无；
}

试试看
这就是解决办法。

您可以使用元素上的隐藏属性/属性来切换可见性

您还应该删除

id=”“

中的所有空格，以便能够通过id正确获取元素

function SolutionFunction（）{
var x=document.getElementById（“解决方案”）；
x、 隐藏=！x.hidden
}

#解决方案{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

试试看
这就是解决办法。

停止空格

function SolutionFunction() {
  var x = document.getElementById("solution");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#solution {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<button onclick="SolutionFunction()">Try it</button>

<div id="solution" style="display: none;">
  This is the solution.
</div>

function SolutionFunction（）{
var x=document.getElementById（“解决方案”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
#解决方案{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
试试看
这就是解决办法。

更好的方法是将函数中的元素作为参数引用。此外，还要研究三元运算符：

   function SolutionFunction(x) {
      x.style.display = x.style.display === "none" ? "block" : "none";
    }
    #solution {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    <button onclick="SolutionFunction(document.getElementById('solution'))">Try it</button>

    <div id="solution" style="display: none;">
      This is the solution.
    </div>

函数解函数（x）{
x、 style.display=x.style.display==“无”？“块”：“无”；
}
#解决方案{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
试试看
这就是解决办法。

这实际上永远不会起作用，因为您的

id中有空格

到CSS可能吗？对不起，我无意中在我的

id

中复制了一个空格，但我的代码没有它的工作方式，但是当我将鼠标放在解决方案顶部时，它会消失，而没有单击按钮。这很奇怪。你能详细说明一下吗？它可以工作，但当我把鼠标放在解决方案上时，它就消失了，没有点击按钮。我不知道为什么。。。只有当我将

display:none

放入元素的style属性时，它才起作用