Parent Element Undefined-CodePudding

I still learning JS and I am trying to create a form validation. I would like to paint my radio button parent element <p> if the radio button is invalid.

I have found a property to locate the parent of my HTMLElement: element.parentElement

However I am unable to select the <p> element using radio.parentElement.Here is my simplified code:

window.onload = Init;

function Init() {
  var formElement = document.forms.myform; //myform
  var radio = formElement.radioName;
  formElement.onsubmit = ProcessForm;
  var 
  isFormValid = () => {
    //validate if form is valid if not -> paint <p> red

    if (
        radio.value === null ||
        radio.value === ""
    ) {
      console.log(radio.parentElement); //(this is undefined. Why?)
      radio.parentElement.backgroundColor = "red"; //(this does not work because it is undefined)
      //Error:doubt.js:13 Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
      return false;
    }
    return true;
  };

  function ProcessForm(event) {
    event.preventDefault();
    if (isFormValid()) {
      //do stuff
    } else {
      //do nothing
    }
  }
}

<!DOCTYPE html>
<html>
  <head>
      <script src="./doubt.js"></script>
  </head>
  <body>
    <form name="myform" action="#" method="POST">
      <p id="caption_project">
        Project Selection
        <br />
        <input type="radio" name="radioName" id="id1" value="1" />
        <label for="id1">1</label>
        <br />
        <input type="radio" name="radioName" id="id2" value="2" />
        <label for="id2">2</label>
        <br />
  
      </p>
      <input id="btnSubmit" type="submit" />
    </form>
  </body>
</html>

How can I select the <p> element without changing the HTML document?

CodePudding user response：

You have more than one radio input named radioName, so formElement.radioName isn't the input; it's the collection of inputs. You can get the nth input by specifying its index, like formElement.radioName[0].

var formElement = document.forms.myform; //myform
var radio = formElement.radioName;

// first radio
console.log(radio[0].parentElement);

 <form name="myform" action="#" method="POST">
      <p id="caption_project">
        Project Selection
        <br />
        <input type="radio" name="radioName" id="id1" value="1" />
        <label for="id1">1</label>
        <br />
        <input type="radio" name="radioName" id="id2" value="2" />
        <label for="id2">2</label>
        <br />
  
      </p>
      <input id="btnSubmit" type="submit" />
    </form>

You could also just query for the p via querySelector:

// query the document for the id:
console.log(document.querySelector('#caption_project'));

// or the first p under the form:
console.log(document.forms.myform.querySelector('p'));

 <form name="myform" action="#" method="POST">
      <p id="caption_project">
        Project Selection
        <br />
        <input type="radio" name="radioName" id="id1" value="1" />
        <label for="id1">1</label>
        <br />
        <input type="radio" name="radioName" id="id2" value="2" />
        <label for="id2">2</label>
        <br />
  
      </p>
      <input id="btnSubmit" type="submit" />
    </form>