Quiero mostrar un reproductor de audio, después de que haga clic en un botón. aquí mi código

<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>

Pero, cuando yo ejecute en el navegador todavía mostrar el reproductor de audio.
alguna solución para esto?

  • Yo no sé nada acerca de ASP.NET pero si se trata de una extensión de HTML, en el momento de su <script> se ejecuta, no hay document.getElementById('myAudio') ya que aún no se han cargado, por lo que su estilo no se aplican (y un error de subir).
InformationsquelleAutor Angripa | 2013-07-18

3 Comentarios

  1. 1

    Primera de todas, para tener el jugador oculto por defecto no es necesario el uso de JavaScript. Agregar el estilo de tal forma que el recipiente en lugar:

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

    Y para mostrar de nuevo al hacer clic en el botón:

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

    Si esta es una página ASP después de que haga clic con el botón podría estar haciendo una devolución de datos. Esto restablecerá el estado. Usted debe tener return false; al final de la onclick.

    Alternativamente, si el problema es que el div nunca está oculto, puede establecer el estilo directamente en el elemento div en el marcado html.

    Asegúrese de que usted está utilizando su navegador de desarrollo de herramientas para comprobar el estilo css en la actualidad sobre el elemento que está buscando. También puede establecer puntos de interrupción y paso a través de su código javascript en tu navegador.

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

    JS:

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

Dejar respuesta

Please enter your comment!
Please enter your name here