如何实现点击按钮隐藏指定div并显示另一目标div？

你只需要在代码中新增对cijfers元素的DOM获取，并在点击事件里同时控制两个元素的显示状态即可。以下是修改后的完整代码：

JavaScript #

const targetDiv = document.getElementById("weging");
const cijfersDiv = document.getElementById("cijfers"); // 新增获取cijfers元素
const btn = document.getElementById("toggle");

btn.onclick = function() {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
    cijfersDiv.style.display = "block"; // 显示cijfers
  } else {
    targetDiv.style.display = "block";
    cijfersDiv.style.display = "none"; // 隐藏cijfers，实现双向切换
  }
}

CSS #

#cijfers {
  display: none;
}

HTML #

<div id="weging">
  <p>Hello</p>
</div>
<button type="button" id="toggle">Volgende</button>
<div id="cijfers">
  <p>Hello2</p>
</div>

修改说明 #

1. 通过document.getElementById("cijfers")获取目标元素的DOM节点，才能对它的样式进行操作
2. 在按钮点击事件中，同步设置两个元素的显示状态：
   • 当weging可见时，隐藏它并显示cijfers
   • 当weging隐藏时，显示它并隐藏cijfers

如果你的需求是点击按钮只执行一次切换（永久隐藏weging、显示cijfers，不再切换回来），可以简化JS代码为：

const targetDiv = document.getElementById("weging");
const cijfersDiv = document.getElementById("cijfers");
const btn = document.getElementById("toggle");

btn.onclick = function() {
  targetDiv.style.display = "none";
  cijfersDiv.style.display = "block";
  btn.disabled = true; // 可选：禁用按钮防止重复点击
}

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