CODEWITHSUNDEEP
javascripthtmlcssweb-applications
Tingles
Tingles

Reputation: 23

Using querySelector with a variable to get radio button values

I'm trying to get the selected value of my radio buttons using querySelector, but it doesn't seem to work when I use a variable as opposed to actually just typing out the name.

Here's my HTML code:

<!DOCTYPE html>

<head>
  <script src="allscripted.js" type="text/javascript"></script>
  <link rel="stylesheet" href="nostylist.css"/>
</head>

<body>

  <h1>HTML UI</h1>

  <table>
    <tr>
      <th>Statement A</th>
      <th>Agree much more with statement A</th>
      <th>Agree somewhat more with statement A</th>
      <th>Agree somewhat more with statement B</th>
      <th>Agree much more with statement B</th>
      <th>Statement B</th>
      <th>Reponse</th>
    </tr>


      <tr>
        <td>I am particular about the food that I eat</td>
        <td><input type="radio" name="row1" value="1" onclick="betterRadioButtons(1)"></td>
        <td><input type="radio" name="row1" value="2" onclick="betterRadioButtons(1)"></td>
        <td><input type="radio" name="row1" value="3" onclick="betterRadioButtons(1)"></td>
        <td><input type="radio" name="row1" value="4" onclick="betterRadioButtons(1)"></td>
        <td>I am not super-picky</td>
        <td id="r1"></td>
      </tr>

      <tr>
        <td>I eat whatever I want</td>
        <td><input type="radio" name="row2" value="1" onclick="betterRadioButtons(2)"></td>
        <td><input type="radio" name="row2" value="2" onclick="betterRadioButtons(2)"></td>
        <td><input type="radio" name="row2" value="3" onclick="betterRadioButtons(2)"></td>
        <td><input type="radio" name="row2" value="4" onclick="betterRadioButtons(2)"></td>
        <td>I carefully watch my diet</td>
        <td id="r2"></td>
      </tr>



  </table>


  <p id="testing"></p>

And here's my JavaScript code:

function betterRadioButtons(num) {
    var rowName = "row" + num.toString();
    var resultName = "r" + num;
    var buttonVal = document.querySelector('input[name=rowName]:checked').value;
    document.getElementById(resultName.toString()).innerHTML = buttonVal;
    console.log(buttonVal);
    console.log(rowName);
    console.log(resultName);

}

My console.log(rowName) statement returns row1, but I'm getting this error:

Uncaught TypeError: Cannot read property 'value' of null.

However, this works:

function betterRadioButtons(num) {
    var rowName = "row" + num.toString();
    var resultName = "r" + num;
    var buttonVal = document.querySelector('input[name="row1"]:checked').value;
    document.getElementById(resultName.toString()).innerHTML = buttonVal;
    console.log(buttonVal);
    console.log(rowName);
    console.log(resultName);

}

Any help would be greatly appreciated!

Upvotes: 2

Views: 4666

Answers (1)

David
David

Reputation: 7305

You need to include the quotation marks, like you do in your second code block when you pass the hard-coded value "row1". But, since you actually want to pass a variable (rowName), you need to concatenate the selector string with the variable name.

So instead of:

var buttonVal = document.querySelector('input[name=rowName]:checked').value;

use:

var buttonVal = document.querySelector('input[name="' + rowName + '"]:checked').value;

Upvotes: 3

Related Questions