0

I'm creating a process which pulls down a static Google map image using their API.

I have a form which has radio buttons with the following map image options:

 Satellite
 Roadmap
 Hybrid
 Terrain

The radio buttons are in a form - part of which is below:

<summary>Basemap</summary>
<div class="group">
    <p>Select a Map Style:</p>
    <p>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Satellite" checked /> Satellite</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Roadmap"/> Roadmap</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Hybrid" /> Hybrid</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Terrain" /> Terrain</label>
    </p>
</div>

I have an underlying javascript document which is called from the html page.

It contains the following code:

var bmStyle = document.getElementById("basemapStyle").value;

if (bmStyle = "Satellite" ) {       
    var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Roadmap" ) {        
    var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Hybrid" )  {        
    var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Terrain" )  {       
    var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

The page loads successfully and a "basemap" is generated. However, the selected radio button makes no difference and the only first variable in the if else statement seems to get loaded.

I feel there's some logic error in the if else statement but I can't seem to get my head round it.

mbuechmann
  • 5,413
  • 5
  • 27
  • 40
Huskie69
  • 795
  • 3
  • 11
  • 31
  • 1
    Declare `var basemapStyle` outside of your `if` statements. You're into scope issues. Also you're using an `assignment operate` in your `if` statements, use `==` or `===`. – Alex Jun 28 '18 at 14:27
  • 3
    You have multiple elements with same id, that is not allowed in html. – Esko Jun 28 '18 at 14:27
  • 2
    You can't use multiple Ids with the same name. – SehaxX Jun 28 '18 at 14:27
  • Both you can have and is allowed to have duplicate IDs but getElementsById() will always return the first. – marekful Jun 28 '18 at 14:28
  • 1
    @Alex There are no scope issues as var declarations get hoisted. But it does not look pretty, though. – mbuechmann Jun 28 '18 at 14:51
  • @mbuechmann thanks for pointing that out. I completely forgot about hoisting. – Alex Jun 28 '18 at 14:53

7 Answers7

1

First:
You have this in your conditional:

if (bmStyle = "Satellite")

Instead you should use:

if (bmStyle == "Satellite")

if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }

Second:
IDs should be unique, so you must change it.

Solution on your code (using duplicated IDs):

var bmStyle = $('#basemapStyle:checked').val()


if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }
KaSkuLL
  • 531
  • 6
  • 27
  • 1
    Why not `===`? Triple equals are always preferred – chevybow Jun 28 '18 at 14:36
  • 1
    `==` automatically converts types if the operands aren't the same type. `===` uses strict comparison. Read [`here`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) – Alex Jun 28 '18 at 14:37
  • @Alex I know, for sure in this case == will run. Maybe === is the correct one. But the real problem was that his code was using equals instead of comparing – KaSkuLL Jun 28 '18 at 14:44
  • This still won't work as all radio boxes have the same id. – mbuechmann Jun 28 '18 at 14:44
1

You cannot use the same id for different elements.

So:

var bmStyle = document.getElementById("basemapStyle").value;

is not returning what you expect. Check it by adding this line:

alert(bmStyle);

So remove the id's.

Read more here how to get radio value:

How to get the selected radio button’s value?

Erwin Moller
  • 2,375
  • 14
  • 22
1
  1. Firstly you have Assignment = in if instead of ==
  2. You have to declare basemapStyle outsite
  3. You cannot use same id to all your radio buttons Here i have redesigned Your Code To Get A Proper Output using Function

function fun(radio){
var bmStyle = radio.value; 

  var basemapStyle;
  if (bmStyle == "Satellite" )
             basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
            
        else if (bmStyle == "Roadmap" )       
             basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
           
        else if (bmStyle == "Hybrid" )      
             basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
           
        else if (bmStyle == "Terrain" )      
             basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
alert(basemapStyle);      
 }
<summary>Basemap</summary>
<div class="group">
<p>Select a Map Style:</p>
<p>
<label><input type="radio" name="basemapStyle"  value="Satellite" checked onclick=fun(this) /> Satellite</label>
<label><input type="radio" name="basemapStyle"  value="Roadmap" onclick=fun(this) /> Roadmap</label>
<label><input type="radio" name="basemapStyle" value="Hybrid" onclick=fun(this) /> Hybrid</label>
<label><input type="radio" name="basemapStyle"  value="Terrain" onclick=fun(this) /> Terrain</label>
</p>
</div>
Shashi Kumar
  • 79
  • 9
1

Instead of using multiple if statements, you should store all the data in an object an retrieve the values from there. And as already mentioned, an id must be unique. So use classes instead.

Example

var radios = document.querySelectorAll(".basemapStyle");
var basemapStyle = "";

var bmStyles = {
  "Satellite": "&maptype=satellite&scale=4&format=png32&key=xxxx",
  "Roadmap": "&maptype=roadmap&scale=4&format=png32&key=xxxx",
  "Hybrid": "&maptype=hybrid&scale=4&format=png32&key=xxxx",
  "Terrain": "&maptype=terrain&scale=4&format=png32&key=xxxx"
}

for (var i = 0; i < radios.length; i += 1) {
  var radio = radios[i];
  if (radio.checked === true) {
    basemapStyle = bmStyles[radio.value];
    console.log(basemapStyle);
  }
}
<summary>Basemap</summary>
<div class="group">
  <p>Select a Map Style:</p>
  <p>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Satellite"  /> Satellite</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Roadmap" /> Roadmap</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Hybrid" /> Hybrid</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Terrain" checked/> Terrain</label>
  </p>
</div>
Community
  • 1
  • 1
0

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element.

Check out W3C

leonardofed
  • 936
  • 2
  • 9
  • 24
  • you need to post the relevant parts of the W3C link for this answer to stay relevant if their content changes. – serraosays Jun 28 '18 at 16:51
0

First assign different ids to the form elements:

<label><input type="radio" name="basemapStyle" id="basemapStyle_Satellite" value="Satellite" checked /> Satellite</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Roadmap" value="Roadmap"/> Roadmap</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Hybrid" value="Hybrid" /> Hybrid</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Terrain" value="Terrain" /> Terrain</label>

Set the default value to the first value. Then check all other form elements:

var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
if (document.getElementById('basemapStyle_Roadmap').checked) {
    basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
} else if (document.getElementById('basemapStyle_Hybrid').checked) {
    basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
} else if (document.getElementById('basemapStyle_Terrain').checked) {
    basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}
mbuechmann
  • 5,413
  • 5
  • 27
  • 40
0

Firstly, you have used an Assignment Operator [=] in your if statement.

Instead, you have to use a Comparison Operator [==] or [===].

This means that your code if (bmStyle = "Satellite") should be if (bmStyle == "Satellite" )

Read about this on W3 JavaScript Operators Reference.

Secondly, you have assigned the same `ID` to all of your radio buttons; you can't do that. `ID's` are made to make the element unique.
Thirdly, it's neater to assign your `basemapStyle` variable outside of the if statements like so: 

// Specify all radio buttons by their 'Unique ID'
var bmStyle1 = document.getElementById("basemapStyle1").value;
var bmStyle2 = document.getElementById("basemapStyle2").value;
var bmStyle3 = document.getElementById("basemapStyle3").value;
var bmStyle4 = document.getElementById("basemapStyle4").value;

// Declared outside
var basemapStyle;

if (bmStyle1 == "Satellite") {
  basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
} else if (bmStyle2 == "Roadmap") {
  basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
} else if (bmStyle3 == "Hybrid") {
  basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
} else if (bmStyle4 == "Terrain") {
  basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

console.log(basemapStyle);
<summary>Basemap</summary>
<div class="group">
  <p>Select a Map Style:</p>
  <p>
    <label><input type="radio" name="basemapStyle" id="basemapStyle1" value="Satellite" checked /> Satellite</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle2" value="Roadmap"/> Roadmap</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle3" value="Hybrid" /> Hybrid</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle4" value="Terrain" /> Terrain</label>
  </p>
</div>

Follow this JSFiddle link to see an updated and optimized version.

Alex
  • 2,164
  • 1
  • 9
  • 27