如何实现点击按钮切换显示/隐藏图片与文本的HTML功能？

修改后的完整代码 #

HTML代码

<button onClick="toggleContent()">切换显示/隐藏</button>
<div id="contentContainer" style="height:400px; width:400px; display:none;">
  <img src="https://placekitten.com/400/400" />
  <p>这是一只可爱的猫咪图片</p>
</div>

JavaScript代码

const toggleContent = () => {
  const container = document.getElementById("contentContainer");
  // 根据当前显示状态切换display属性
  container.style.display = container.style.display === 'none' ? 'block' : 'none';
}

关键修改说明 #

• 在容器div内添加了文本元素，确保点击按钮时能同时展示图片和文本
• 重构函数逻辑，通过判断当前容器的display属性值，实现显示/隐藏的双向切换（原代码仅能实现单次显示）
• 给容器设置了更语义化的ID，提升代码可读性

内容的提问来源于stack exchange，提问作者wehategoogle