JavaScript实现单选按钮内容输出时显示undefined的原因排查

问题场景 #

尝试通过JavaScript将单选按钮的选中选项输出到HTML页面，例如选中“Humber Current Project”时，期望显示“Humber News project”，但实际显示“undefined project”。

相关HTML代码

<p id="caption_project">Project Selection
    <br/>
    <input type="radio" name="f__project" id="in_restaurant" value="restaurant"/>
    <label for="in_restaurant">LEGO Project</label>
    <br/>

    <input type="radio" name="f__project" id="in_humber" value="Humber News"/>
    <label for="in_humber">Humber Current Project</label>
    <br/>

    <input type="radio" name="f__project" id="in_self" value="self-determined"/>
    <label for="in_self">Self-determined Project</label>
</p>

option of the <span id="result__project"></span> project.

原JavaScript代码

var userProject = document.getElementsByName("f__project");
var outputUserProject = document.getElementById("result__project");

outputUserProject.innerHTML = userProject.value;

问题原因 #

1. 错误操作DOM元素集合：document.getElementsByName("f__project")返回的是NodeList类数组对象，包含所有name为f__project的单选按钮，而非单个元素。这个类数组对象本身没有value属性，直接访问userProject.value必然得到undefined。
2. 缺少事件监听逻辑：原代码仅在页面加载时执行一次赋值，既没有监听用户选择单选按钮的change事件，也没有处理“无选中项”的场景，无法实时更新选中结果。

修正方案 #

要正确获取选中值并实时更新显示，需要遍历元素找到选中项，同时绑定change事件：

const userProjects = document.getElementsByName("f__project");
const outputUserProject = document.getElementById("result__project");

// 定义更新显示的函数
function updateProjectDisplay() {
    // 从集合中筛选出选中的单选按钮
    const selected = Array.from(userProjects).find(item => item.checked);
    // 更新页面内容，有选中项则显示其value，否则提示未选择
    outputUserProject.textContent = selected ? selected.value : "未选择";
}

// 页面初始化时执行一次，处理默认选中情况
updateProjectDisplay();

// 给每个单选按钮绑定change事件，用户选择时实时更新
userProjects.forEach(item => {
    item.addEventListener("change", updateProjectDisplay);
});

内容的提问来源于stack exchange，提问作者Danyal Chatha