单击按钮时如何显示div

Question

 const targetDiv = document.getElementById("weging"); const btn = document.getElementById("toggle"); btn.onclick = function() { if (targetDiv.style.display.== "none") { targetDiv.style;display = "none". } else { targetDiv.style;display = "block"; } }

 #cijfers { display: none; }

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

大家好，我的网站上有这个小部分。 当我按下按钮时，我想隐藏 div 'weging' 并显示 div 'cijfers'。 div 'weging' 完美地隐藏在这个 JS 代码中，但我怎样才能显示 div 'cijfers'。 如果有人可以帮助我，我将不胜感激！

Answer 1

当用户单击按钮时，这应该会回答您的问题，它将更改 div 样式以显示块

 function showDiv() { document.getElementById('divContent').style.display = "block"; }

 <div id="divContent" style="display:none;" class="answer_list" > Some content</div> <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Answer 2

如果您需要同时显示和隐藏 div，您可以执行以下操作

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

const toogableDisplays=()=>{
 if (wegingDiv.style.display !== "none") {
    wegingDiv.style.display = "none";
    cijfersDiv.style.display="block";
  } else {
    wegingDiv.style.display = "block";
    cijfersDiv.style.display="none";
  }
}

btn.onclick = toogableDisplays();
//Styles
#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>

Answer 3

 function showDiv() { document.getElementById('welcomeDiv').style.display = "block"; }

 <div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div> <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Answer 4

使用 CSS 和“隐藏的”class 可能更容易。 最初将 class 应用于cijfers ，然后在单击按钮时切换两个 div 上的 class （使用classList和toggle ），以便从cijfers中删除并添加weging 。 再次单击该按钮会产生相反的效果。

 // Cache all the elements const weging = document.getElementById('weging'); const cijfers = document.getElementById('cijfers'); const btn = document.getElementById('toggle'); // A more modern way of adding an event listener // to an element btn.addEventListener('click', handleClick); // Put the elements into an array, and then iterate // over each toggling the "hidden" class on/off function handleClick() { [weging, cijfers].forEach(div => { div.classList.toggle('hidden'); }); }

 .hidden { display: none; }

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

Answer 5

如果您希望通过按一下按钮来实现这一点，那么您可以执行以下操作：

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

btn.onclick = function() {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
    cij.style.display = "block";
  } else {
    targetDiv.style.display = "block";
    cij.style.display = "none";
  }
}