admin 管理员组

文章数量: 1086019

I want display an audio player, after click a button. here my code

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

But, when i run in browser it still display the audio player. any solution for this?

I want display an audio player, after click a button. here my code

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

But, when i run in browser it still display the audio player. any solution for this?

  • javascript
Share Improve this question edited Jul 18, 2013 at 12:46 user447356 asked Jul 18, 2013 at 4:12 AngripaAngripa 1572 gold badges4 silver badges14 bronze badges 1
  • I know nothing about ASP.NET, but if it is an extend of HTML, by the time your <script> is executed, there's no document.getElementById('myAudio') since it's not loaded yet, so your style will not apply (and an error should raise). – Passerby Commented Jul 18, 2013 at 5:11
Add a ment  | 

4 Answers 4

Reset to default 3

First of all, to have the player hidden by default you don't need to use JavaScript. Add such style to the container instead:

 <div id="myAudio" style="display: none;">

And to show it back upon clicking the button:

function viewAudio() {
    document.getElementById('myAudio').style.display = "block";
}

If this is an ASP page then that button click might be doing a postback. This will reset the state. You should have either return false; at the end of the onclick.

Alternatively, if the problem is that the div is never hidden, you can set the style directly on the div element in the html markup.

Make sure that you are using your browser's development tools to check the css styling currently on the element you're looking at. You can also set breakpoints and step through your javascript code, right in your browser.

<asp:Button ID="ButtonShowPanel" CausesValidation="false" CssClass="btn btn-primary pull-right" runat="server" Text="Add Contact" OnClientClick="javascript:SetVisiblityPanels(false); return false;" />


        function SetVisiblityPanels(check) {
            if (check) {
                $('.SearchPanel').show(1000);
                $('.DescriptionPanel').hide(1000);
            }
            else {
                $('.SearchPanel').hide(1000);
                $('.DescriptionPanel').show(1000);
            }
        }

 <script type="text/javascript">
    function CheckVisiblityPanels(check) {
        if (check) {           
        {                     
        document.getElementById('<%=myAudio.ClientID%>').style.display = "block";                
        }
        else
        {
        document.getElementById('<%=myAudio.ClientID%>').style.display = "none";               
        }
        return false;
    }
};
</script>

本文标签： hide and display a div using javascript in ASPNETStack Overflow

版权声明：本文标题：hide and display a div using javascript in ASP.NET - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744084925a2530943.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。