如何将单选按钮值推送到数组表中？

Question

var name = "";
var lastname = "";
var age = "";
var gender = "";
var a = [];
/*{name : "first", lastname:"last",age:22},
{name : "sfirst",lastname:"slast",age:21},
{name : "tfirst",lastname:"tlast",age:22},
];*/
function clear() {
    document.getElementById("firstname").value = "";
    document.getElementById("lastname").value = "";
    document.getElementById("age2").value = "";
}
function add() {
    var FirstName = document.getElementById("firstname").value;
    var LastName = document.getElementById("lastname").value;
    var age = document.getElementById("age2").value;
    var gender = document.querySelector('input[name = "gender"]:checked').value;
    var person = { name: FirstName, lastname: LastName, age: age, gender: gender };
    console.log(person);
    a.push(person);
    console.log(a);
    var table = "<table border='1|1'>";

    table += "<th>";
    table += "FirstName";
    table += "</th>";
    table += "<th>";
    table += "LastName";
    table += "</th>";
    table += "<th>";
    table += "Age";
    table += "</th>";
    table += "<th>";
    table += "Gender";
    table += "</th>"
    table += "<th>";
    table += "Edit";
    table += "</th>";
    table += "<th>";
    table += "Delete";
    table += "</th>";
    {
        for (i = 0; i < a.length; i++) {
            table += "<tr align='center'>";
            table += "<td>" + a[i].name + "</td>";
            table += "<td>" + a[i].lastname + "</td>";
            table += "<td>" + a[i].age + "</td>";
            table += "<td>" + a[i].gender + "</td>";
            table += '<td><button  id = "edit"  onclick = "edit(' + i + ')" ><i class="fa fa-edit"></i></button></td>';
            table += '<td><button  id = "delete" onclick = "delete(' + i + ')"><i class="fa fa-trash-o"></i></button></td>';
            table += "</tr align='center'>";
        }
        table += "</table>";
        document.getElementById("arraytable").innerHTML = table;
    }
    document.getElementById("firstname").value = "";
    document.getElementById("lastname").value = "";
    document.getElementById("age2").value = "";
    document.querySelector('input[name = "gender"]:checked').value = "";
}
function edit(index) {
    console.log(index);
    document.getElementById("firstname").value = a[index].name;
    document.getElementById("lastname").value = a[index].lastname;
    document.getElementById("age2").value = a[index].age;
    document.querySelector('input[name = "gender"]:checked').value = "";
}
function update() {
    for (var i = 0; i < a.length; i++) {
        if (i == index - 1) {
            new_fname = document.getElementById("firstName").value
            new_lname = document.getElementById("lastName").value
            new_a = document.getElementById("age2").value
            a[i].name = new_fname;
            a[i].lname = new_lname;
            a[i].age = new_age;
        }
        document.getElementsByTagName("tr")[1].getElementsByTagName("td")[0].innerHTML = array[i].name;
        document.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].innerHTML = array[i].lname;
        document.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML = array[i].a;
    }
    console.log(a);
};

/*Fname = document.getElementById("firstname").value;
Lname = document.getElementById("lastname").value;
Age = document.getElementById("age2").value;
a[index].name = Fname;
a[index].lastname = Lname;
a[index].age = Age;
document.getElementsByTagName("tr")[1].document.getElementsByTagName("td")[0].innerHTML=a[index].name;
document.getElementsByTagName("tr")[1].document.getElementsByTagName("td")[1].innerHTML=a[index].lastname;
document.getElementsByTagName("tr")[1].document.getElementsByTagName("td")[2].innerHTML=a[index].age;
}*/
function deleterow(e) {
    var index = e.parentElement.parentElement.rowIndex;
    var i = e.parentNode.parentNode;
    if (index == 1) {
        array.splice(0, 1);
        i.parentNode.removeChild(i);
    }
    else {
        array.splice(index - 2, 1);
        i.parentNode.removeChild(i);
    }
    console.log(array);
};

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	FirstName : <input type="text" id="firstname" value=""> <br>
	LastName  : <input type="text" id="lastname" value=""> <br>
	age       : <input type="number" id="age2" value=""> <br><br>
	Male : <input type="radio" name="gender" value="male">
	Female:<input type="radio" name="gender" value="female"><br>
	<button id="add" onclick="add()">Add</button>
	<button id="clear" onclick="clear()">Clear</button> <br><br>
	<div id="arraytable"></div>

如何将单选按钮值推入表中？当我按下单选按钮时，我试图将文本框值推入表中它会出现错误 “arraytable.html：30 Uncaught TypeError：无法读取null的属性'value'  at add（arraytable.html：30）在这里输入代码  在HTMLButtonElement.onclick（arraytable.html：13）“ 任何人都可以帮我解决这个错误吗？