Я не могу прочитать значение переключателя не по умолчанию, когда отмечен в JS - PullRequest
Новая
       38

Я не могу прочитать значение переключателя не по умолчанию, когда отмечен в JS

0 голосов
/ 16 мая 2018

Я пытаюсь прочитать значение переключателей. Первое радио проверено по умолчанию, и я могу прочитать его значение. Когда я проверяю вторую кнопку с помощью value="USA", она все равно возвращает value="UK". 

var countryName = document.querySelector("input[name=userCountry]:checked");

function adjustMeasurements() {
  if (countryName.value == "UK") {
    alert("User lives in UK.");
  } else {
    alert("User lives in USA.");
  }
}
<input type="radio" name="userCountry"  value="UK"  checked="checked" required="required" /> 
<input type="radio" name="userCountry"  value="USA" />

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Проблема с вашим кодом в том, что вы выполняете его только один раз при загрузке скрипта.Чтобы сделать его отзывчивым и запускать alerts каждый раз, когда вы делаете новый выбор, вам нужно указать event listener и передать свою функцию в качестве обратного вызова этому слушателю (или вызвать его внутри обратного вызова). 

function adjustMeasurements(countryName) {
  if (countryName == "UK") {
    alert("User lives in UK.");
  } else {
    alert("User lives in USA.");
  }
}

const inputs = document.querySelectorAll('input');
inputs.forEach(item => {
  item.addEventListener('change', event => {
    adjustMeasurements(event.target.value);
  });
});
<input type="radio" name="userCountry"  value="UK"  checked="checked" required="required" />
<input type="radio" name="userCountry"  value="USA" />

И если вашей единственной целью является достижение этой функции - оповещение о местоположении на основе выбранного значения, то вы можете полностью опустить функцию adjustMeasurements и выполнить толькоэто. 

const inputs = document.querySelectorAll('input');

inputs.forEach(item => {
  item.addEventListener('change', event => {
    alert(`User lives in ${event.target.value}`)
  });
});
<input type="radio" name="userCountry"  value="UK"  checked="checked" required="required" />
<input type="radio" name="userCountry"  value="USA" />
0 голосов
/ 16 мая 2018

Вам нужно поставить строку: 

var countryName = document.querySelector("input[name=userCountry]:checked");

внутри вашей функции.Вы устанавливаете переменную и никогда не меняете ее, поэтому независимо от того, какое значение вы выбрали по умолчанию, вы всегда будете придерживаться.

Оказавшись внутри вашей функции, она будет обновлять переменную при каждом запуске.Это даст вам правильный результат. 

function adjustMeasurements()
{
    var countryName = document.querySelector("input[name=userCountry]:checked");

    if (countryName.value == "UK") {
        alert("User lives in UK.");
    } else {
        alert("User lives in USA.");
    }
}
...