asp.net - Javascript could show hidden div -

what needed achieve clicking preview button (asp button, calls function), hidden preview section shows. didn't work below codes... not sure missed. looked through many answers here, strangely, none of them worked. appreciated if can provide thoughts / solution on this.

in .aspx

    <style>     #previewsection {display:none;}  </style> 

in script, (edited point btpreview, 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> preview of 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> 

probably want:

edited add modification after 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 else preview.');  };    var btsubmit_click = function() {    console.log('do else 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> preview of 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 solution 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> preview of 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>