Переменная Javascript в форме - PullRequest
Новая
       1

Переменная Javascript в форме

0 голосов
/ 28 июня 2018

Я создаю процесс, который снимает статическое изображение карты Google с помощью их API.

У меня есть форма с переключателями со следующими параметрами изображения карты: 

 Satellite
 Roadmap
 Hybrid
 Terrain

Радиокнопки имеют форму, часть которой находится ниже: 

<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>

У меня есть базовый документ javascript, который вызывается со страницы html.

Содержит следующий код: 

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";
}

Страница успешно загружается и создается «базовая карта». Однако выбранный переключатель не имеет значения, и кажется, что единственная первая переменная в операторе if else загружается.

Я чувствую, что в операторе if else есть какая-то логическая ошибка, но я не могу разобраться с этим.

Ответы [ 7 ]

0 голосов
/ 28 июня 2018
  1. Во-первых, у вас есть Назначение = если вместо ==
  2. Вы должны объявить basemapStyle внешним
  3. Вы не можете использовать один и тот же идентификатор для всех своих радио кнопок Здесь я переработал ваш код, чтобы получить правильный вывод, используя функцию 

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>
0 голосов
/ 28 июня 2018

Вместо использования нескольких операторов if вы должны сохранить все данные в объекте и получить значения оттуда. И, как уже упоминалось, идентификатор должен быть уникальным. Так что используйте вместо этого классы.

Пример 

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>
0 голосов
/ 28 июня 2018

Во-первых, вы использовали Assignment Operator [=] в вашем if утверждении.

Вместо этого вы должны использовать Comparison Operator [==] или [===].

Это означает, что ваш код if (bmStyle = "Satellite") должен быть if (bmStyle == "Satellite" )

Читайте об этом на W3 JavaScript Operators Reference.

Во-вторых, вы присвоили один и тот же ID всем своим переключателям; ты не можешь сделать это. ID's сделаны, чтобы сделать элемент уникальным.
В-третьих, лучше присваивать переменную basemapStyle за пределами операторов if, например: 

// 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";
}
<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>
0 голосов
/ 28 июня 2018

Сначала присвойте различные идентификаторы элементам формы: 

<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>

Установите значение по умолчанию для первого значения. Затем проверьте все остальные элементы формы: 

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";
}
0 голосов
/ 28 июня 2018

Нельзя использовать один и тот же идентификатор для разных элементов.

Итак: 

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

не возвращает то, что вы ожидаете. Проверьте это, добавив эту строку: 

alert(bmStyle);

Так что удалите идентификаторы.

Подробнее о том, как получить значение радио, читайте здесь:

Как получить значение выбранного переключателя?

0 голосов
/ 28 июня 2018

В XML идентификаторы фрагментов имеют тип ID, и для каждого элемента может быть только один атрибут типа ID.

Выезд W3C

0 голосов
/ 28 июня 2018

Первый:
У вас есть это в вашем условии:

if (bmStyle = "Satellite")

Вместо этого вы должны использовать:

if (bmStyle == "Спутник") 

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";
        }

Второе:
Идентификаторы должны быть уникальными, поэтому вы должны изменить их.

Решение для вашего кода (с использованием дублированных идентификаторов) : 

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";
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...