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

• 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

4 Answers 4

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>