Javascript 可以显示隐藏的 div

Question

需要实现的是点击预览按钮（ASP按钮，调用另一个函数），隐藏的预览部分显示。 但它没有通过下面的代码工作......不确定我错过了什么。

在.aspx

    <style>
    #PreviewSection {display:none;}

</style>

在脚本中，（编辑为指向 btPreview，但仍然无法正常工作...）

    <script type="text/javascript">

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

</script>

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>

Answer 1

Display:none 具有误导性。 它不仅不显示，还不是页面的一部分。 所以你不能点击它。 使用不透明度：

#previewSection{
  opacity:0;
 }

这是正确的js：

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

Answer 2

可能这就是你想要的：

编辑以在我的第一篇文章后添加您的修改。

 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>

这将是 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>