顯示隱藏的 Div 在提交時保持隱藏

Question

您好，我有一個模態表單。 在這個表單中是一個提交按鈕。 我有我只想在單擊此按鈕時顯示的結果。 這些結果在模式之外，應在單擊提交按鈕后顯示。 我設法隱藏了結果，但似乎無法揭示它。 這就是我得到的：

 function onSubmit(){ document.getElementById('submitButton').style.display = "none"; document.getElementById('revealProgress').style.display = "block"; return true; }

 #revealProgress{ display: none; }

 <button onclick =" window.location.href = '#close'; deleteData(); getData();;" href="#close" id="submitButton" class="tester2" > Submit </button> <div id = "revealProgress"> <p>Exercise: <strong id="exerciseList"></strong></p></strong></p><br> <p>Sets: <strong id="setList"></strong></p></strong></p><br> <p>Reps: <strong id="repList"></strong></p></strong></p><br> <p>Weight: <strong id="weightList"></strong></p></strong></p><br> <p>total: <strong id="totalList"></strong></p></strong></p><br> <div id="progress_bar"></div> </div>

你看到我做錯了什么嗎？

Answer 1

您根本沒有使用 JS function，這就是為什么沒有任何反應！

在您的情況下，最簡單的解決方案是替換它：

onclick =" window.location.href = '#close'; deleteData();  getData();;"

有了這個：

onclick = "onSubmit()"

這是這樣做之后的工作片段：

 function onSubmit(){ document.getElementById('submitButton').style.display = "none"; document.getElementById('revealProgress').style.display = "block"; return true; }

 #revealProgress{ display: none; }

 <button onclick = "onSubmit()" href="#close" id="submitButton" class="tester2" > Submit </button> <div id = "revealProgress"> <p>Exercise: <strong id="exerciseList"></strong></p></strong></p><br> <p>Sets: <strong id="setList"></strong></p></strong></p><br> <p>Reps: <strong id="repList"></strong></p></strong></p><br> <p>Weight: <strong id="weightList"></strong></p></strong></p><br> <p>total: <strong id="totalList"></strong></p></strong></p><br> <div id="progress_bar"></div> </div>