Question

返回 onclick 单选按钮上的值

2021-10-21

122

javascript

尝试根据单选输入从函数返回一个值，但是我一直得到一个 null 或

Uncaught TypeError: Cannot read properties of null (reading '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();") />

Answer 1

页面加载时，没有检查输入。为了使其适用于页面加载和输入检查，您可以使用 Optional Chain 进行断言。

此外，语法无效。不要使用

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 。

Answer 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()" />