Pachu Pachu - 3 years ago 70
jQuery Question

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 selects that his platform is "Android", then he'll see an specifc message. If he selects that his platform is "iOS", then he will see another.

I want to achieve this using a variable "isAndroid", if it is true it will display the Android message plus the android icon and if it is false it will display the iOS message and the iOS icon.

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 with this boolean to use it on more stuff later, if "isAndroid" is true it will do many other things, but i'm showing the basic here to keep it simple.

This is my actual HTML and Javascript code:



function platformAndroid() { //function with the content of Android. it should run if "esAndroid" is true
$("#iconoDispositivo").attr("src","http://i.imgur.com/ksYWdrF.png");
$("#chosenPlatform").html("Your chosen platform was android");
}

function platformIos(){ //function with the content of iOS. it should run if "esAndroid" is false
$("#iconoDispositivo").attr("src","http://i.imgur.com/YPqQsib.png");
$("#chosenPlatform").html("Your chosen platform was iOS")
}

var isAndroid = 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
isAndroid;
} else {
isAndroid = false; // otherwise it is false
}

$('#dispositivo')on.("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"){
isAndroid;
} else {
isAndroid = false;
}
})


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

}

dispositivoStart();

#chosenPlatform {
font-size: 20px;
color: green;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Platform choose
</title>
</head>
<body>
<h2>Platform</h2>
<div class="field">
<label for="dispositivo">Choose your platform</label><br>
<select id="dispositivo">
<option>Android</option>
<option>iOS</option>
</select>
</div>
<div class="field">
<p id="chosenPlatform">Your chosen platform was Android</p> <img src="http://i.imgur.com/ksYWdrF.png" width="32" alt="androidIcon" id="iconoDispositivo">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
</body>
</html>





I can't understand why in the snippet i can't call jquery correctly, in my own files i use cdns, but that's the code that i'm trying to run.

With the current code, the boolean from "isAndroid" changes to false, but doesn't display the content that it should display when "isAndroid" 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 "isAndroid" = true/false is simpler, becouse later on i have to keep using that boolean 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.

Answer Source

Before we address your primary issue, we should address your HTML. Run the HTML through a validator (not W3C, it's outdated). The demo features a working example of HTML content being inserted into a <section> and values being set in an <output> form control, which is determined by a user's selection of a <select>.

Methods, Properties & Processes

jQuery

.on() Event Delegation

.html(), .text(), & .val()

JavaScript

ES6 Template Literals

switch()

Details are commented in demo

Demo

/* NOTE: ES6 Template Literals are being used instead of
|| String Literals:

[Example: String Literal >>> 
   var SL = "This is a String, this is a " + variable\ 
   + " concatenated";
   
[Example: Template Literal >>>  
   var TL = `This is a String, this is a ${variable}
   interpolated`;
*/
   
/* Register change event on the select#mobile
|| .on() method delegates events. Main advantage
|| of delegating events is that the event will
|| be registered not only for elements currently
|| in DOM, but elements that will be there in the
|| future.
*/
/* Callback function is getContent which is invoked
|| upon a change event occurring on #mobile
*/
$('#mobile').on('change', getContent);


function getContent(e) {
  // Store the value of a form control (i.e. #mobile)
  var opt = this.value;
  
  /* Pass value to a switch(). A switch() method is
  || a if/if else condition that's easier to read.
  */
  switch (opt) {
  
    // if (opt === 'android') {...
    case 'android':
    
      /* If getting/setting data of a form control
      || use .val() method.
      || ex. input, output, select, etc..
      */
      // Change the value of output#out
      $('#out').val(`Selected OS is Android`);
      
      /* If getting/setting content between an element's
      || tags use .html() or .text() methods
      || ex. <div>CONTENT</div>
      */
      // Change the HTML of section.dock
      $('.dock').html(
        `<h1>Samsung Galaxy</h1>
      <label>Model: <input></label>
      <button>DONE</button>`);
      break;
    case 'iOS':
      $('#out').val(`Selected OS is iOS`);
      $('.dock').html(
        `<h1>iPhone</h1>
      <label>Model: <input></label>
      <button>DONE</button>`);
      break;
      /* If its neither 'android' nor 'iOS', then it
      || refers to default case. In this particular case
      || output#out and section.dock will be erased. 
      */
    default:
      $('#out').val('');
      $('.dock').html('');
      break;
  }
}
select,
input,
button,
label {
  font: inherit
}
<form id='interface'>

  <select id='mobile'>
    <option value='-'>-------------</option>
    <option value='android'>Android</option>
    <option value='iOS'>iOS</option>
  </select>

  <output id='out'></output>
</form>



<section class='dock'></section>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download