點擊表單中的提交按鈕后如何顯示隱藏的div？

Question

我有帶有提交按鈕的簡單HTML表單。 按下此按鈕后，我希望看到div#my_id ，它以前是不可見的。

<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">

<div id="my_id" style="display: none"> My text </div>

我該如何運作？

Answer 1

您的HTML是否包含在<form>標記內？ 在執行JavaScript之前，您的“提交”按鈕可能正在提交表單並導致頁面刷新。

在這種情況下，請嘗試將輸入類型更改為button以查看效果。

例如：

 #my_id { display: none; } 

 <form> <input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" /> <div id="my_id"> My text </div> </form> 

Answer 2

它應該工作。

 <input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;"> <div id="my_id" style="display: none"> My text </div> 

您確定沒有其他HTML在“破壞”您的代碼嗎？ 我已經在Firefox，Chrome和IE（所有最新版本都經過測試）上進行了測試

Answer 3

您的提交按鈕將使用定義的操作和方法提交放置在其中的表單。 表格中的所有參數/字段都將作為查詢參數。

之所以看不到div，是因為點擊導致頁面重新加載。 重新加載后，div將再次隱藏。