单选按钮返回未定义

Question

Radio button keeps returning undefined. I looked it up, tried answers from other similar questions, but I just get undefined when I add the value to a table.

This is my javascript code to get the value from the button.

var grade="";
        var grades = document.getElementsByName('grade');
        for(var i=0;i<grades.length;i++)
        {
            if(grades[i].checked)
                grade = grades[i].value;
        }

And here is my html code

<div><label>Grade</label>
<label><input type="radio" value="5" name="grade">5</label>
<label><input type="radio" value="6" name="grade">6</label>
<label><input type="radio" value="7" name="grade">7</label>
<label><input type="radio" value="8" name="grade">8</label>
<label><input type="radio" value="9" name="grade">9</label>
<label><input type="radio" value="10" name="grade">10</label></div>

I copied this code from a similar page with radio buttons and that one works as intended. All I did was change the name and values.

EDIT: This is the code that adds a new row with all the inputted information

var tbody = document.getElementsByTagName("tbody")[0]
                tbody.innerHTML += "<tr><td>" + name.value + "</td>" + "<td>" + index.value + "</td>" + "<td>" + phone.value + "" +
                    "</td>" + "<td>" + grade.value + "</td>" + "<td>" + session.value + "</td>"
                name.value = ""
                index.value = ""
                phone.value = ""
                grade.value = ""
            }

Answer 1

所以我通过在 tbody.innerHTML 中将 Grade.value 更改为 Grade 来修复它