如何将对象追加至空对象？表单答案存入JSON数组的实现问询

首先，你的代码主要有两个核心问题：提前获取了用户输入值，以及缺少触发收集逻辑的时机。下面是修正后的完整实现思路和代码：

1. 核心问题分析 #

• 页面加载时用户还没填写内容，直接获取输入框/单选框的值只会拿到空值或undefined，这是你之前代码没生效的主要原因。
• 你重复将单选元素添加到了两个容器中，会导致页面出现重复元素，同时也没必要。
• 变量firstQuestion、secondQuestion未定义，应该对应你实际创建的问题输入项。

2. 完整修正代码 #

// 创建第四个问题的文本框
const fourthInput = document.createElement("INPUT");
fourthInput.setAttribute("class", "textBox");
fourthInput.setAttribute("id", "fourthQID");
window.data.appendChild(fourthInput);

// 创建第五个问题的单选按钮组
const radioContainer = document.getElementById("radioButton");
// 假设这是你的选项数据，可根据实际情况替换
const optionData = { options: ["选项A", "选项B", "选项C"] }; 
for (const o of optionData.options){
  const radioInput = document.createElement("INPUT");
  radioInput.setAttribute("type", "radio");
  radioInput.setAttribute("id", `radio-${o}`); // 给每个单选框设置唯一ID
  radioInput.name = "RadioBtn";
  radioInput.value = o;

  const radioLabel = document.createElement("LABEL");
  radioLabel.setAttribute("for", `radio-${o}`); // 关联标签与单选框，提升可访问性
  radioLabel.textContent = o;

  const div = document.createElement("div");
  div.style.height = "5px";
  div.appendChild(radioInput);
  div.appendChild(radioLabel);
  
  // 只添加到单选容器中，避免重复元素
  radioContainer.appendChild(div);
}

// 创建提交按钮，触发答案收集逻辑
const submitBtn = document.createElement("button");
submitBtn.textContent = "提交答案";
window.data.appendChild(submitBtn);

// 绑定点击事件，在用户完成输入后收集答案
submitBtn.addEventListener("click", function() {
  // 初始化存储对象
  const data = { answers: [] };

  // 获取文本框答案，用trim()过滤空输入
  const fourthAnswer = document.getElementById('fourthQID').value.trim();
  // 获取单选框答案，用可选链?避免未选中时报错
  const fifthAnswer = document.querySelector("input[name=RadioBtn]:checked")?.value;

  // 将有效答案添加到数组
  if (fourthAnswer) {
    data.answers.push(fourthAnswer);
  }
  if (fifthAnswer) {
    data.answers.push(fifthAnswer);
  }

  // 转换为JSON格式
  const answersJson = JSON.stringify(data);
  console.log("最终JSON结果：", answersJson);
  // 这里可以添加后续操作，比如发送到服务器、存储到本地等
});

关键优化点说明 #

• 触发时机：通过点击提交按钮触发收集逻辑，确保用户已经完成所有输入操作。
• 元素唯一性：给每个单选框设置唯一ID，并关联对应的标签，既符合规范也提升了用户体验。
• 错误防护：使用?.可选链操作符，防止用户未选中任何单选框时出现Cannot read properties of null的报错。
• 空值过滤：用trim()和条件判断过滤无效的空输入，避免存入无意义的答案。

这样修改后，就能正确将用户的表单答案收集到data.answers数组中，并转换为符合需求的JSON格式了。

内容的提问来源于stack exchange，提问作者Min Tae