Возвращаемое значение с помощью переключателя onclick

#javascript

Вопрос:

Пытаясь вернуть значение из функции, основанной на радиовходе, однако я продолжаю получать либо null, либо

Ошибка неперехваченного типа: не удается прочитать свойства null (чтение ‘value’)».

 function myFunction() {
  var radioTest = document.querySelector('input[name="inputtest"]:checked').value;
  return radioTest;
}

var test = myFunction();
console.log(test);

 <input type="radio" id="test123" name="inputtest" value="testing 123" onclick( "myFunction();") />

Развернуть фрагмент

1. Это потому input[name="inputtest"]:checked , что не существует, потому что ваш переключатель не отмечен. input[name="inputtest"] существует, поэтому вы можете проверить его checked статус в функции.

Ответ №1:

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

Кроме того, синтаксис неверен. Вместо

 onclick( "myFunction();")

использовать

 onclick="myFunction()"

Вот полный код

 function myFunction() {
  var radioTest = document.querySelector('input[name="inputtest"]:checked')?.value;
  console.log(radioTest);
  return radioTest;
}

var test = myFunction();

 <input type="radio" id="test123" name="inputtest" value="testing 123" onclick="myFunction()" />

Развернуть фрагмент

Примечание: я бы рекомендовал использовать onchange , если у вас в форме более одного переключателя.

Ответ №2:

В вашем коде есть две проблемы.

То, как вы прикрепляете событие щелчка.
Вы вызываете myFunction() при загрузке. Таким образом, он выдает исключение, потому что raiobutton не отмечен.

Используйте приведенный ниже код.

 function myFunction() {
  var radioTest = document.querySelector('input[name="inputtest"]:checked').value;
  return radioTest;
}

function handleClick()
{
  let radioValue = myFunction();
  console.log(radioValue);
}

 <input type="radio" id="test123" name="inputtest" value="testing 123" onclick = "handleClick()" />

Развернуть фрагмент