2

espero puedan ayudarme. Tengo en una tabla un select y un boton. El select tiene un option vacio, otro que dice Mejor empleo y otro que dice Inicio negocio.

Quiero que cuando seleccione Mejor empleo ó Inició negocio el boton se ponga verde al quitar la clase .btn-danger del boton y agregar .btn-success. Esto ya lo logro.

Lo que me falta es que al seleccionar el espacio vacio, quite los cambios y vuelva a tener su clase .btn-danger. Es decir, que esté como al principio.

HTML

  <thead>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Pais</th>
                <th>Estaca</th>
                <th>Barrio</th>
                <th>Edad</th>
                <th>Status</th>
                <th>Educación</th>
                <th>Oficio</th>
                <th>Conocimiento</th>
                <th>Aspiraciones</th>
                <th>Inicio</th>
                <th>Acciones</th>
                <th>Nuevo status</th>
                <th>Enviar</th>
            </tr>
        </thead>

        <?php while($ver=mysqli_fetch_row($result)): ?>

        <tbody>
            <tr>
                <td><?php echo $ver[0];  ?></td>
                <td><?php echo $ver[1];  ?></td>
                <td><?php echo $ver[2];  ?></td>
                <td><?php echo $ver[3];  ?></td>
                <td><?php echo $ver[4];  ?></td>
                <td><?php echo $ver[5];  ?></td>
                <td><?php echo $ver[6];  ?></td>
                <td><?php echo $ver[7];  ?></td>
                <td><?php echo $ver[8];  ?></td>
                <td><?php echo $ver[9];  ?></td>
                <td><?php echo $ver[10]; ?></td>
                <td><?php echo $ver[11]; ?></td>
                <td><?php echo $ver[12]; ?></td>
                <td><?php echo $ver[13]; ?></td>
                <td><select name="" id="nuevoStatus" onchange="cambiarBtn(this.value);"  >
                    <option value="0"> </option>
                    <option value="Empleo">Empleo</option>
                    <option value="Negocio">Negocio</option>
                    <input type="text" id="seleccion" >
                </select></td>
                <td>
                    <div class="botonAS">
                        <input type="button" id="enviar" class="btn btn-danger" value="Autosuficiente" >
                    </div>
                </td>

            </tr>
        </tbody>

SCRIPT

function cambiarBtn(){

    var option = document.getElementById('#nuevoStatus');

    if (option != 0) {
        $("#enviar").removeClass("btn-danger");
        $("#enviar").addClass("btn-success");

    } else if (option = 0) {
        $("#enviar").removeClass("btn-success");
        $("#enviar").addClass("btn-warning");
    }
}
2
  • 1
    El else.if debe tener doble igual. Es decir option==0
    – yhoyo
    el 30 nov. 2019 a las 3:22
  • 1
    Hice lo que me sugirieron y nada, sigue igual, cambia a verde el boton pero luego al seleccionar el primer option no regresa a rojo. Es decir, la sintaxis con el operador si puede mejorar pero no es la solucion, Y si en vez de comparar con '0' comparo directamente con el valor del option?
    – henryscode
    el 30 nov. 2019 a las 13:10

2 respuestas 2

4

Tienes un error en el segundo if

Debe ser

else if (option == 0) {...

Con dos iguales ==

Pero es mejor práctica hacer comparaciones en JS de esta manera:

option === 0
option !== 0

Es para asegurarte que estas comparando el mismo tipo de tato Ejemplo:

Si option es un string. option = '1'

option == 1 // true
option === 1 // false

Con eso te vas evitar algunos dolores de cabeza

La solución completa la encuentras acá: https://codepen.io/oscarmyepes/pen/dyPbjbe

3
  • 1
    Hice lo que me sugirieron y nada, sigue igual, cambia a verde el boton pero luego al seleccionar el primer option no regresa a rojo. Es decir, la sintaxis con el operador si puede mejorar pero no es la solucion, Y si en vez de comparar con '0' comparo directamente con el valor del option?
    – henryscode
    el 30 nov. 2019 a las 13:15
  • 2
    Mira este ejemplo, estás leyendo mal el value del select codepen.io/oscarmyepes/pen/dyPbjbe el 30 nov. 2019 a las 22:28
  • 1
    Excelente, muchas gracias, ya entendí y me funcionó. Sería bueno que lo coloques en la respuesta para que esté disponible para otros
    – henryscode
    el 2 dic. 2019 a las 3:13
1
function cambiarBtn(){

    var option = document.getElementById('#nuevoStatus');

    if (option != 0) { //aqui deberias usar una sentencia !==
        $("#enviar").removeClass("btn-danger");
        $("#enviar").addClass("btn-success");

    } else if (option = 0) { //Aqui tienes un error ya que en ves de comparar estas igualando
        $("#enviar").removeClass("btn-success");
        $("#enviar").addClass("btn-warning");
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.