Trying to return a value from a function based on radio input however I keep getting either a null or
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();") />When the page is loaded, there is no checked input. To make it work for both page load and input checked, you can use Optional Chain for the assertion.
Also, the syntax is invalid. Instead of
onclick( "myFunction();")
use
onclick="myFunction()"
Here is the full code
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()" />A note: I'd recommend to use onchange in case you have more than one radio button in your form.
There are two issues in your code.
Use the below code.
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()" />