dimanche 23 juillet 2017

Changing html content using if statement and jquery

i'm trying to display certain sentences and images according to the value of a select menu.

If an user on my website selects that his platform is "Android", then he'll see an specifc text input. If he selects that his platform is "iOS", then he will see another.

I'm trying to do this the easier and clearer i can, so i'm using a variable called "esAndroid". If "esAndroid" is true, Android stuff is displayed. If it's false, iOS stuff is displayed.

Then i implemented the jquery method "change()" to being able to swtich and change the content whenever the selector value is changed between "Android" and "iOS". I've managed to achieve my objective in a different and more complicated way, but i want to do it simple, like if "esAndroid" is true then that's it.

This is my actual HTML and Javascript code:

<div class="campo">
    <label for="dispositivo">Plataforma en la que juegas frecuentemente</label>
    <div class="input-group">
    <span class="input-group-addon inputPropio addonPropio"><img src="imagenes/androidIcon.png" id="iconoDispositivo" class="img-fluid"></span>
    <select class="form-control inputPropio selectores" id="dispositivo">
        <option>Android</option>
        <option>iOS</option>
    </select>
    </div>
</div>
<div class="campo">
    <label id="labelUsername">Cuenta de Android <img src="imagenes/botonInfo.png" class="infoPress"></label>
    <div class="input-group inputEntero">
      <span class="input-group-addon inputPropio addonPropio"><img src="imagenes/usuario.png" class="img-fluid"></span>
      <input type="text" class="form-control inputPropio" placeholder="" id="username" aria-describedby="basic-addon1">
    </div>
    <p id="notaUsername">La cuenta de android es un email de Google</p>
</div>
function dispositivoAndroid() {  //function with the content of Android. it should run if "esAndroid" is true
        $("#iconoDispositivo").attr("src","imagenes/androidIcon.png");
        $("#labelUsername").html("Cuenta de Android <img src='imagenes/botonInfo.png' class='infoPress'>");
        $("#username").attr("placeholder","Ej: micuenta@gmail.com");
        $("#notaUsername").html("La cuenta de android es un email de Google");
}

function dispositivoIos(){   //function with the content of iOS. it should run if "esAndroid" is false
        $("#iconoDispositivo").attr("src","imagenes/appleIcon.png");
        $("#labelUsername").html("ID de Apple <img src='imagenes/botonInfo.png' class='infoPress'>")
        $("#username").attr("placeholder","Ej: cuentaapple@icloud.com")
        $("#notaUsername").html("El ID de Apple suele ser un email @icloud.com")
}

var esAndroid = true;                    

function dispositivoStart(){                    // this functions displays the correct stuff when user refresh the page                                                                                                                                  
        if($('#dispositivo').val() === "Android"){  //if my select input value is android, then "esAndroid" is true
                esAndroid;
        } else {
                esAndroid = false;                      // otherwise it is false
        }

        $('#dispositivo').change(function(){        //here i wrote this piece of code to switch "esAndroid" to true or false when they select different values on the selector input
                if($(this).val() === "Android"){
                        esAndroid;
                } else {
                        esAndroid = false;
                }
        })


        if(esAndroid){            // here is the piece of code that displays the content. if esAndroid is true, then the function that displays "Android" content runs.
                dispositivoAndroid()  
        } else {
                dispositivoIos()      //if "esAndroid" is false, then the function that displays  "iOS" content runs
        }
        
}

dispositivoStart();

With the current code, the value from "esAndroid" changes to false, but doesn't display the content that it should display when "esAndroid" is false (the iOS content). It also doensn't switch back to true when the select input value switchs to "Android" again.

As i said at the beggining, i could achieve my objetive if i use #dispositivo.val() === "Android" but i think that doing "esAndroid" = true/false is simpler, becouse later on i have to keep using that if statement to display certain content depending on that selector value.

I hope i was clear enough, this is my second question written on Stackoverflow, thanks in advance.

Aucun commentaire:

Enregistrer un commentaire