Javascript could show hidden div

Question

What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.

In the .aspx

    <style>
    #PreviewSection {display:none;}

</style>

in the script, (edited to point to btPreview, but still not working... )

    <script type="text/javascript">

    var previewbt = document.getElementById('btPreview');
    previewbt.addEventListener('click',function(){
        PreviewSection.style.display = "block";
        })

</script>

the html:

    <div class ="container" id="InputSection">
    <table class="table">
        <tbody>
            <tr>
                <td style="width:60%">
                    <p>The Question</p>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
                    <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
                </td>
            </tr>
        </tbody>
    </table>

    <asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>

</div>

<hr />

<div class="container" id="PreviewSection">
    <h3> The preview of the content.</h3>
    <table class="table">
        <tbody>
            <tr>
                <td>

                    Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />

                </td>
            </tr>
        </tbody>
    </table>
    <asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>

</asp:Content>

does the previewsectionID button added dynamically after page is loaded? — Dima Gimburg, Nov 17 '16 at 16:35
@user2181397 It is a container class. as below,

The preview of the content.

Question: — Digger, Nov 17 '16 at 16:37
Nobody can click on a hidden div. Do opacity=0; to hide + still clickable — Jonas Wilms, Nov 17 '16 at 16:37
How can you click on `PreviewSection` if it is hidden by default? It doesn't make sense. — Win, Nov 17 '16 at 16:43
the preview button is always visible... when you hit the button, the preview section shows, at least supposed to. — Digger, Nov 17 '16 at 16:44
Where is preview button I do not see it in your question? Please upload the complete code rather than we trying to figure out the missing codes. — Win, Nov 17 '16 at 16:45
I think this question was already [answered here](http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Teocci, Nov 17 '16 at 16:51
@Digger Why do you want to use ***ASP.Net Button*** for ***btPreview*** which will end up posting back to server? Could it be ***div tag or simple html button***? — Win, Nov 17 '16 at 17:52

score 0 · Answer 1 · answered Nov 17 '16 at 16:38

0

Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:

#previewSection{
  opacity:0;
 }

Heres the right js:

<script type="text/javascript"> 
var previewsectionID = document.getElementById('PreviewSection');
 previewsectionID.addEventListener('click',function(){ 
previewsectionID.style.opacity = 1; });
 </script>

answered Nov 17 '16 at 16:38

Jonas Wilms

132,000
20
149
151

very strangely, the opacity doesn't work neither... yes, it is hidding, but it couldn't be seen when clicked. – Digger Nov 17 '16 at 17:16

Teocci · Accepted Answer · 2016-11-17T17:35:56.530

Probably this is what you want:

Edited to add your modification after my first post.

var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
  PreviewSection.style.display = "block";
})

var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
  PreviewSection.style.display = "none";
  InputSection.style.display = "none";
})

var btPreview_Click = function() {
  console.log('Do something else for Preview.');
};

var btSubmit_Click = function() {
  console.log('Do something else for Submit.');
};

#PreviewSection {
   display: none;
 }

<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>

</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>

This will be the solution for ASP:

<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>

Hi Teocci, thanks for the reply. as you can see from the html code I uploaded later, the preview button is located at the bottom of the upper section, the lower section is hidden when the page is loaded. When I finish working with the upper section, i hit the preview button, then the preview section shows up — Digger, Nov 17 '16 at 16:59
@Digger post a modification to the first version. Hope is helpful. — Teocci, Nov 17 '16 at 17:22
Hi Teocci, I can see from the code snippet, it is working and it is what I need, but when I transplant to the file, it has a incompatible issue of the html button and asp.net button. Do you have a solution for that? thank you. — Digger, Nov 17 '16 at 17:23

Javascript could show hidden div

The preview of the content.

2 Answers2