單擊按鈕時如何顯示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";
  }
}