none
Eventos en botones RRS feed

  • Pregunta

  • hola, tengo una duda:

    si tengo por ejemplo 5 botones, donde al presionar cada uno quiero que se muestre información diferente en el mismo html. además de información también incluye otro botón que si se da click te debe direccionar a otro html que contiene cierta información para ese botón.

    ¿cómo puedo lograr hacer eso en html?

    miércoles, 15 de junio de 2016 22:24

Todas las respuestas

  • Lo de los 5 botones puedes hacerlo asi:

    <input type="button" value="Pinchame Boton1" onclick="alert('Has pínchado el boton 1');" />
    
    <input type="button" value="Pinchame Boton2" onclick="alert('Has pínchado el boton 2');" />
    
    <input type="button" value="Pinchame Boton3" onclick="alert('Has pínchado el boton 3');" />
    
    <input type="button" value="Pinchame Boton4" onclick="alert('Has pínchado el boton 4');" />
    
    <input type="button" value="Pinchame Boton5" onclick="alert('Has pínchado el boton 5');" />
    


    Y para redireccionar te puede servir esto:

    <input type="submit" src="/sitio.com/miotrapagina.html" value="enviar" /> 

    Si te sirvio recuerda marcar esta respuesta como Correcta.


    Jhonatan Plata http://kayprogramacion.blogspot.com/

    miércoles, 15 de junio de 2016 22:36
  • De hecho los 5 botones, así los hice pero para mostrar su información lo use utilizando onclick = MostrarMenuLunes y se muestra la información que quiero con otro botón más, con el cual al hacer click puedo ir a otra página.

    Mi duda es cómo puedo controlar el mostrar información sólo cuando cuando se pulse ese botón y que se muestre la información que quiero

    miércoles, 15 de junio de 2016 22:54
  • otorrest,

    Existen varias formas, una de ellas es definiendo un id por cada botón y haciendo uso de JQuery:

    <input type="button" id="btn-1" value="Boton1" />
    <input type="button" id="btn-2" value="Boton2" />
    <input type="button" id="btn-3" value="Boton3" />
    <input type="button" id="btn-4" value="Boton4" />
    <input type="button" id="btn-5" value="Boton5" />
    
    
    $('button').click(function(){
            if ($(this).attr('id') == 'btn-1')
            { /*Accciones*/ }
            if ($(this).attr('id') == 'btn-2')
            { /*Accciones*/ }
            .....
    })

    miércoles, 15 de junio de 2016 23:02
  • Con el query, puedo controlar qué información quiero que se muestre al dar click en algún botón?

    Esto es lo que había hecho:

    <button type="button" class="btn btn-default" name="bt_lunes" onclick="escribeMenuLunes()">LUNES</button>
    <button type="button" class="btn btn-default" name="bt_martes" onclick="escribeMenuMartes()">MARTES</button>
    <button type="button" class="btn btn-default" name="bt_miercoles" onclick="escribeMenuMiercoles()">MIÉRCOLES</button>

    <button type="button" class="btn btn-default" name="bt_jueves" onclick="escribeMenuJueves()">JUEVES</button>

    <button type="button" class="btn btn-default" name="bt_viernes" onclick="escribeMenuViernes()">VIERNES</button>
    <button type="button" class="btn btn-default" name="bt_sabado" onclick="escribeMenuSabado()">SÁBADO</button>

    <p id="textoMenu">Pulsa un día para visualizar el menú universitario!</p>

    function escribeMenuLunes(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada: Salpicon. </p><p>Plato: Estofado de carne, arveja verde, arroz.</p><p>Postre: Fruta de la estación.</p><p>Bebida: Refresco de Maracuya.</p><a href='orders.html' class='medium button' id='compra_lunes' onclick='muestraLunes()'>COMPRAR</a>";
            }
            function escribeMenuMartes(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada: Ensalada oriental. </p><p>Plato: Arroz chaufa con cerdo, nabo encurtido.</p><p>Postre: Gelatina frutada.</p><p>Bebida: Limonada.</p><a href='orders.html' class='medium button' id='compra_martes'>COMPRAR</a>";
            }
             function escribeMenuMiercoles(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada: Ensalada rusa. </p><p>Plato: Milanesa de pollo, arroz, chucrut.</p><p>Postre: Flan.</p><p>Bebida: Chicha morada.</p><a href='orders.html' class='medium button' id='compra_miercoles'>COMPRAR</a>";
            }
             function escribeMenuJueves(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada:Ocopa. </p><p>Plato: Pescado a la chalaca, arroz.</p><p>Postre: Fruta de la estación. </p><p>Bebida: Refresco de cebada.</p><a href='orders.html' class='medium button' id='compra_jueves'>COMPRAR</a>";
            }
             function escribeMenuViernes(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada: Mixtura de legumbres. </p><p>Plato: Seco de pollo, panamito, arroz.</p><p>Postre: Carlota.</p><p>Bebida: Refresco de manzana.</p><a href='orders.html' class='medium button' id='compra_viernes'>COMPRAR</a>";
            }
             function escribeMenuSabado(){
                document.getElementById("textoMenu").innerHTML = "<p>Entrada: Huevo en salsa golf. </p><p>Plato: Tallarin saltado con carne.</p><p>Postre: Delicia de fruta.</p><p>Bebida: Refresco de fruta. </p><a href='orders.html' class='medium button' id='compra_sabado'>COMPRAR</a>";
            }
            function muestraSaldo(){
                var saldo = 20.00;
                document.getElementById('saldo').innerHTML = saldo;
            }
            function muestraMenuLunes(){
                document.getElementById("MenuLunes") = "<p>Entrada: Salpicon. </p><p>Plato: Estofado de carne, arveja verde, arroz.</p><p>Postre: Fruta de la estación.</p><p>Bebida: Refresco de Maracuya.</p>";
            }

    miércoles, 15 de junio de 2016 23:20