页面加载时出现错误的 OnClick 消息答案

【问题标题】：Wrong OnClick Message on Page Load页面加载时出现错误的 OnClick 消息
【发布时间】：2021-12-24 06:05:46
【问题描述】：

我已经实现了一个 onclick 功能，以在页面加载时隐藏页面部分。然后会有一个显示“显示更多”的按钮。

当这个按钮被点击时，它应该显示隐藏部分，并且按钮应该显示“少显示”。

不幸的是，当我的页面加载时，应该隐藏的部分没有隐藏，按钮仍然显示“显示更多”。

这是错误的流程。该部分应在页面加载时隐藏。

我如何做到这一点？

谢谢大家。

【问题讨论】：

你能链接到一些codepen或jsfiddle，我们可以测试你的代码吗？
@SwapnilSoni 提到的合理开始将是代码 sn-p。你是如何隐藏你的元素的？在我看来，最简单的方法可能是使用 CSS 并将元素设置为 display: none 默认情况下，然后使用 javascript 控制该 CSS 属性以打开和关闭该部分。
这是我的 HTML 这是 JS 函数 toggleBlock() { var myBlock = document.getElementById("service -区域2"); var blockButton = document.getElementById("ShowMore"); if (myBlock.hidden) { blockButton.innerHTML = "Show Less"; myBlock.hidden = false; } else { blockButton.innerHTML = "显示更多"; myBlock.hidden = true; } } CODEPEN 链接：codepen.io/Gamip/pen/OJjoXoP
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript css function buttonclick

【解决方案1】：

请试试这个：

HTML

<button id="ShowMore" onclick="toggleBlock()">Show More</button>

<div id="service-area2">Content</div>

CSS

#service-area2 {
  display: none;
}

JavaScript

function toggleBlock() {
  const myBlock = document.getElementById("service-area2");
  const blockButton = document.getElementById("ShowMore");
  
  const isMyBlockVisible = myBlock.style.display === "block";
  
  myBlock.style.display = isMyBlockVisible ? "none" : "block";
  blockButton.textContent = isMyBlockVisible ? "Show More" : "Show Less";
}

我创建了一个 jsFiddle 来查看它的运行情况here。

【讨论】：