ocultar/mostrar boton

dune1993 · #1 (**permalink**) 15/10/2015, 03:22

Buenos dias amigos,

estoy buscando una forma de hacer que, al presionar un boton aparezca otro y que el anterior desaparezca.

Lo he intentado pero no me sale

Si me podeis ayudar porfavor...

Mil graciass!!!

omarMusic · #2 (**permalink**) 16/10/2015, 08:55

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boton</title>
</head>
<body>
    <input type="button" id="btn-1" value="Botón 1" onclick="mostrarBoton()"/>
    <input type="button" id="btn-2" value="Botón 2" style="display: none;"/>
 
    <script>
        var btn_1 = document.getElementById('btn-1');
        var btn_2 = document.getElementById('btn-2');
        
        function mostrarBoton () {
            btn_1.style.display = 'none';
            btn_2.style.display = 'inline';
        }
    </script>
</body>
</html>

mmm... aunque esto me parece una tarea D: la idea es que muestres tus avances y acá te ayuden con tus dudas.

Saludos!

dune1993 · #3 (**permalink**) 16/10/2015, 10:20

Cita:

Iniciado por omarMusic

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boton</title>
</head>
<body>
    <input type="button" id="btn-1" value="Botón 1" onclick="mostrarBoton()"/>
    <input type="button" id="btn-2" value="Botón 2" style="display: none;"/>
 
    <script>
        var btn_1 = document.getElementById('btn-1');
        var btn_2 = document.getElementById('btn-2');
        
        function mostrarBoton () {
            btn_1.style.display = 'none';
            btn_2.style.display = 'inline';
        }
    </script>
</body>
</html>

mmm... aunque esto me parece una tarea D: la idea es que muestres tus avances y acá te ayuden con tus dudas.

Saludos!

Hola mira,
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("dt").hide();
});
$("#show").click(function(){
$("dt").show();
});
});
getElementById("parteOpcional").style.display = "none"; // Ocultar
</script>

mi html:

<dt>
<div data-role="fieldcontain" class="relojes" >
<a href="#" data-role="button" data-theme="a" id="hide" onclick="ActivarReloj()" data-inline="true" value="INICIO"><img src="imagenes/icono-iniciar-nuevo.png" height="75" width="75" ></a>
</div></dt>

<div data-role="fieldcontain" class="relojes" >
<a href="#dialogo" data-role="button" data-rel="popup" data-theme="a" data-inline="true" data-position-to="window" data-transition="turn"><img src ="imagenes/icono-cerrar-nuevo.png" height="75" width="75" ></a>

<div data-role="popup" id="dialogo" data-theme="b" data-dismissible="false">
<div class="ui-content">
<strong>Vas a TERMINAR el tiempo en esta OT</strong>

<a href="" data-role="button" data-rel="back" data-inline="false" style="background:#be1622"> <strong>NO</strong></a>
<a href="" data-role="button" data-rel="back" onclick="ActivarReloj2()" id="botonActivar2" value="FIN" data-inline="false" style="background:#3aaa35">
<strong>SI</strong></a>
</div> </div></div>

(ignora lo que no viene al caso jeje) entonces he consegido que me salgan los 2 botones y al pulsar iniciar, este me desaparece y solo me deja el de cerrar, hasta ahi bien pero me falta que desde un principio me salga solo el de iniciar.
Resumiendo: un boton que al pulsarle aparezca otro y despues de pulsarlo tambien que desaparezca.

kj24 · #4 (**permalink**) 18/10/2015, 07:45

Creo que si anaizas tantito el ejemplo que te ya te dio omarMusic, debería bastarte para entender de sobra como hacer lo que quieres, pero a ver si esto te basta para entenderlo:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boton</title>
</head>
<body>
    <input type="button" id="btn-1" value="Botón 1" onclick="mostrarBoton2()"/>
    <input type="button" id="btn-2" value="Botón 2" onclick="mostrarBoton1()" style="display: none;"/>
 
    <script>
        var btn_1 = document.getElementById('btn-1');
        var btn_2 = document.getElementById('btn-2');
        
        function mostrarBoton2 () {
            btn_1.style.display = 'none';
            btn_2.style.display = 'inline';
        }
        function mostrarBoton1 () {
            btn_2.style.display = 'none';
            btn_1.style.display = 'inline';
        }
    </script>
</body>
</html>

kj