JavaScript获取radio元素父节点formData失败求助

我制作了一个包含名字、姓氏、邮箱及城市单选项的HTML表单，希望通过JavaScript实现：当未选择城市时，显示法语提示“Veuillez choisir une ville”并应用预设CSS样式。但目前无法获取class为formData的父元素，使用代码const parent3 = document.getElementsByName("location").parentNode;时，控制台返回undefined，导致验证函数无法正常运行，请求协助解决。

1. document.getElementsByName("location")返回的是NodeList节点集合，不是单个DOM元素，集合本身没有parentNode属性，因此会返回undefined。
2. 代码存在变量名不一致问题：定义了parent3，但后续操作使用的是parent，会触发parent is not defined错误。
3. city.focus()中的city变量未定义，无法实现聚焦功能。

修正后的JavaScript代码 #

function validateRadio() {
  // 获取选中的单选框
  const checkedRadio = document.querySelector("input[name='location']:checked");
  // 直接通过类名获取formData父元素，更可靠
  const formDataParent = document.querySelector(".formData");
  // 获取第一个单选框用于聚焦
  const firstRadio = document.querySelector("input[name='location']");

  if (!checkedRadio) {
    firstRadio.focus();
    formDataParent.setAttribute("data-error", "Veuillez choisir une ville");
    formDataParent.setAttribute("data-error-visible", "true");
  } else {
    formDataParent.setAttribute("data-error-visible", "false");
  }
}

原CSS代码（无需修改） #

.formData[data-error]::after {
  content: attr(data-error);
  font-size: 0.4em;
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  line-height: 0.3;
  opacity: 0;
  transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
  opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
  border: 2px solid #e54858;
}

原HTML代码（无需修改） #

<div class="formData">
  <input class="checkbox-input" type="radio" id="location1" name="location" value="New York" />
  <label class="checkbox-label" for="location1">
    <span class="checkbox-icon"></span>
    New York
  </label>
  <input class="checkbox-input" type="radio" id="location2" name="location" value="San Francisco" />
  <label class="checkbox-label" for="location2">
    <span class="checkbox-icon"></span>
    San Francisco
  </label>
  <input class="checkbox-input" type="radio" id="location3" name="location" value="Seattle" />
  <label class="checkbox-label" for="location3">
    <span class="checkbox-icon"></span>
    Seattle
  </label>
  <input class="checkbox-input" type="radio" id="location4" name="location" value="Chicago" />
  <label class="checkbox-label" for="location4">
    <span class="checkbox-icon"></span>
    Chicago
  </label>
  <input class="checkbox-input" type="radio" id="location5" name="location" value="Boston" />
  <label class="checkbox-label" for="location5">
    <span class="checkbox-icon"></span>
    Boston
  </label>
  <input class="checkbox-input" type="radio" id="location6" name="location" value="Portland" />
  <label class="checkbox-label" for="location6">
    <span class="checkbox-icon"></span>
    Portland
  </label>
  <br><small></small>
</div>

• 直接使用document.querySelector(".formData")获取父元素，比通过子元素找父元素更简洁可靠，避免集合操作的问题。
• 修复了变量名不一致的bug，统一使用formDataParent操作父元素。
• 定义了firstRadio变量，实现未选择时聚焦到第一个城市单选框的功能。

内容的提问来源于stack exchange，提问作者Simon Flambeaux