我无法使用 javascript 在 dom 中找到元素的父级

Question

我有一个用 html 构建的表单（名字、姓名、电子邮件......并且应该选择一个城市）。 使用javascript，我想更改css并显示一条消息，上面写着（法语）“请选择一个城市”。 我无法访问父级“class=”formData”以应用css中的样式构建。所以，我的功能暂时无法工作。 我想使用“const parent3 = document.getElementsByName("location").parentNode;”来定位“formData”，它会在 console.log “undefined 'parent'” 中返回我，而不是返回我“* 标称

          </div>*" like for the previous field of the form.

谢谢您的帮助。

function validateRadio() {
  const checkradio = document.querySelector("input[name='location']:checked");
  const parent3 = document.getElementsByName("location").parentNode;
  console.log(parent3, "parent")

    if  (checkradio == null){
      city.focus();
    parent.setAttribute("data-error", "Veuillez choisir une ville");
    parent.setAttribute("data-error-visible", "true");
  } else {
    parent.setAttribute("data-error-visible", "false");
    }

.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;
}

<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>

Answer 1

请参阅getElementsByName 的文档：

Document 对象的 getElementsByName() 方法返回一个 NodeList 中具有给定名称属性的元素集合 文档。

所以，两个解决方案：

1. 您执行更具体的查询，只返回一个元素，然后您可以直接应用 parentNode 属性。
2. 你loop 在 NodeList 中的项目

Answer 2

考虑使用Element.closest。

document.addEventListener(`input`, handle);
document.addEventListener(`click`, handle);
const checkLocation = isChecked => {
  document.querySelector(`input[name='location']`)
    .closest(`.formData`) // <= closest
    .dataset.error = isChecked ? `` : `Veuillez choisir une ville` };
    
checkLocation(false);

function handle(evt) {
  if (evt.target.name === `location`) {
    checkLocation(true);
  }
  
  if (evt.target.id === `clear`) {
    document.querySelectorAll(`input[name='location']`)
      .forEach( r => r.checked = false );
    return checkLocation(false);  
  }
}

.formData[data-error]:after {
  position: absolute;
  content: attr(data-error);
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  opacity: 1;
  transition: 0.3s;
}

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