I have a form build in html (first name, name, email... and a city should be choosen). With javascript, i want to change the css and make appears a message which says (in french) "please choose a city". I cannot access to the parent "class = "formData" in order to apply the style build in css. So, my function cannot work for the moment. i want to target "formData" using " const parent3 = document.getElementsByName("location").parentNode;", it returns me in the console.log "undefined 'parent'" instead of returning me "* Nom

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

Thank you for your help.

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
                >
                <input
                  
                  type="radio" 
                  id="location1"
                  name="location"
                  value="New York"
                />
                <label  for="location1">
                  <span ></span>
                  New York</label
                >
                <input
                  
                  type="radio"
                  id="location2"
                  name="location"
                  value="San Francisco"
                />
                <label  for="location2">
                  <span ></span>
                  San Francisco</label
                >
                <input
                  
                  type="radio"
                  id="location3"
                  name="location"
                  value="Seattle"
                />
                <label  for="location3">
                  <span ></span>
                  Seattle</label
                >
                <input
                  
                  type="radio"
                  id="location4"
                  name="location"
                  value="Chicago"
                />
                <label  for="location4">
                  <span ></span>
                  Chicago</label
                >
                <input
                  
                  type="radio"
                  id="location5"
                  name="location"
                  value="Boston"
                />
                <label  for="location5">
                  <span ></span>
                  Boston</label
                >
                <input
                  
                  type="radio"
                  id="location6"
                  name="location"
                  value="Portland"
                />
                <label  for="location6">
                  <span ></span>
                  Portland</label
                >
                <br><small></small>
              </div>

CodePudding user response：

See the documentation of getElementsByName :

The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.

So, two solutions :

1. You perform a query more specific that return only one element, and then you can apply directly parentNode property.
2. You loop over the items in a NodeList

CodePudding user response：

Consider using Element.closest.

const checkRadio = document.querySelector(`input[name='location']:checked`);

if (!checkRadio) {
  document.querySelector(`input[name='location']`)
    .closest(`.formData`)
    .dataset.error = "Veuillez choisir une ville";
}

.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 >
  <input  type="radio" id="location1" name="location" value="New York" /> New York
  <input  type="radio" id="location2" name="location" value="San Francisco" /> San Francisco
  <input  type="radio" id="location3" name="location" value="Seattle" /> Seattle
  <input  type="radio" id="location4" name="location" value="Chicago" /> Chicago
  <input  type="radio" id="location5" name="location" value="Boston" /> Boston
  <input  type="radio" id="location6" name="location" value="Portland" /> Portland
</div>