comportamiento botones js

lamenenchu · #1 (**permalink**) 11/01/2016, 04:36

Buenas.
Tengo una duda a ver si alguien me la puede resolver.

Resulta que tengo 3 botones distintos, y me gustaría que al hacer onClick en uno de ellos se cambie por otro de los botones.

Qué pasos debería seguir?

Muchas gracias

lamenenchu · #2 (**permalink**) 11/01/2016, 05:22

Hola de nuevo. Hasta ahora he conseguido cambiar un botón por otro... pero claro, son 3 posibilidades... por lo tanto hay un paso que no acabo de ver.

Os dejo el código:

Código:

<body>
<button type="button" class="btn-curso" id="primero" onclick="visualiza_segundo()">Parcial</button>
    <button type="button" class="btn-finish"  id="segundo" onclick="visualiza_primero()" style="visibility:hidden; display:none;">Total</button>
      <button type="button" class="btn-finish" id="tercero" onclick="visualiza_tercero()">Parcial</button>
   </body>

Código:

function visualiza_primero() {
         document.getElementById('primero').style.visibility='visible';
         document.getElementById('primero').style.display='block';
         document.getElementById('segundo').style.visibility='hidden';
         document.getElementById('segundo').style.display='none';
      };
      function visualiza_segundo() {
         document.getElementById('segundo').style.visibility='visible';
         document.getElementById('segundo').style.display='block';
         document.getElementById('primero').style.visibility='hidden';
         document.getElementById('primero').style.display='none';
      };
function visualiza_tercero() {
         document.getElementById('tercero').style.visibility='visible';
         document.getElementById('tercero').style.display='block';
         document.getElementById('primero').style.visibility='hidden';
         document.getElementById('primero').style.display='none';
      };

ZedGe1505 · #3 (**permalink**) 11/01/2016, 07:34

No entiendo nada xD

Cual es el orden lógico que quieres???

Quieres seleccionar "Parcial" y que se cambie por "Total"?? Y si selecciono "Total"?? y que pasa con el otro "Parcial"???

lamenenchu · #4 (**permalink**) 11/01/2016, 07:40

Cita:

Iniciado por ZedGe1505

No entiendo nada xD

Cual es el orden lógico que quieres???

Quieres seleccionar "Parcial" y que se cambie por "Total"?? Y si selecciono "Total"?? y que pasa con el otro "Parcial"???

Hola Zedge. Gracias por responder.
A ver si me explico mejor.

Tengo 3 botones (total, parcial, ninguno).
En realidad el comportamiento que me gustaría es:
1.- Al clickar sobre botón parcial, poder seleccionar entre ninguno o total.
2.- Al clickar sobre botón total, poder seleccionar entre ninguno o parcial.
3.- Al clicakr sobre botón ninguno, poder seleccionar entre total o parcial.

ZedGe1505 · #5 (**permalink**) 11/01/2016, 07:55

Espero te sirva algo así:

Código HTML:

Ver original<body>
<button type="button" class="btn-curso" id="primero" onclick="hiddenParcial()">Parcial</button>
 
    <button type="button" class="btn-finish"  id="segundo" onclick="hiddenTotal()" disabled>Total</button>
    
      <button type="button" class="btn-finish" id="tercero" onclick="visualiza_tercero()" disabled>Ninguno</button>
   </body>

Código Javascript:

Ver originalfunction hiddenParcial() {
        document.getElementById("primero").disabled = true;
        document.getElementById("segundo").disabled = false;
        document.getElementById("tercero").disabled = false;
};
 
function hiddenTotal() {
        document.getElementById("primero").disabled = false;
        document.getElementById("segundo").disabled = true;
        document.getElementById("tercero").disabled = false;
};
 
function visualiza_tercero() {
        document.getElementById("primero").disabled = false;
        document.getElementById("segundo").disabled = false;
        document.getElementById("tercero").disabled = true;
};

Aquí el código funcionando:

https://jsfiddle.net/8hj6stxr/2/

Tu puedes cambiar el código para ver si quieres ocultarlos o deshabilitarlos

lamenenchu · #6 (**permalink**) 11/01/2016, 08:00

[QUOTE=ZedGe1505;4768917]

Si, más o menos me podría servir. Gracias

ZedGe1505 · #7 (**permalink**) 11/01/2016, 08:13

Una opción parecida a la que tenias

https://jsfiddle.net/8hj6stxr/3/

lamenenchu · #8 (**permalink**) 03/02/2016, 08:18

Cita:

Iniciado por ZedGe1505

Una opción parecida a la que tenias

https://jsfiddle.net/8hj6stxr/3/

Al final lo conseguí con tu ayuda... Esto es lo que necesitaba

Código:

 <div class="pos1">
    <button type="button" class="btn-curso" id="primero" onclick="visualiza_segundo()">Parcial</button>
      </div>
  <div class="pos2">
         <button type="button" class="btn-finish"  id="segundo" onclick="visualiza_tercero()" style="visibility:hidden; display:none;">Total</button>
  </div>
  <div class="pos3">
      <button type="button" class="btn-wait" id="tercero" onclick="visualiza_primero()" style="visibility:hidden; display: none;"> No
        </div>

Código:

function visualiza_primero() {                  document.getElementById('primero').style.visibility='visible';
    document.getElementById('primero').style.display='inline';
        document.getElementById('tercero').style.visibility='hidden'; document.getElementById('segundo').style.visibility='hidden';
         document.getElementById('segundo').style.display='none';
      };
function visualiza_segundo() {
       document.getElementById('primero').style.visibility='hidden';  document.getElementById('segundo').style.visibility='visible';
         document.getElementById('segundo').style.display='inline';
         document.getElementById('tercero').style.visibility='hidden';
         document.getElementById('tercero').style.display='none';
      };
function visualiza_tercero() {
  document.getElementById('segundo').style.visibility='hidden'; 
  document.getElementById('tercero').style.visibility='visible';
         document.getElementById('tercero').style.display='inline';
         document.getElementById('primero').style.visibility='hidden';
         document.getElementById('primero').style.display='none';
};

Código:

.btn-finish {
    background-color: #018579; 
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
   border:0;
  cursor: pointer;
  width: 70px;
}
.btn-finish a{
    color:white;
    text-decoration: none;
}
.btn-finish a:hover{
    color:#b7e8d7;
    text-decoration: none;
}
.btn-curso {
    background-color: #f7b36f;
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
     border:0;
  cursor: pointer;
   width: 70px;
}
.btn-curso a{
    color:white;
    text-decoration: none;
  
}
.btn-curso a:hover{
    color:#f2eac6;
    text-decoration: none;
}
.btn-wait{
    background-color: #d54b47;
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
  border:0;
  cursor: pointer;
  
}
.btn-wait a{
    color: white;
    text-decoration: none;
}
.btn-wait a:hover{
    color:#fcaaa9;
    text-decoration: none;
}
.pos1, .pos2, .pos3{
  position: absolute;
  top: 10px;
  left: 10px;
}

Ahora me falta averiguar pq el botón de no, al darle el mismo width que el resta, deja de funcionarme el comporta