Path of <form> elements in onsubmit event listener-CodePudding

I managed to find the event element's path to change the color of a <form> input field's <label> from a event listener.Now I want to do the same from an onsubmit handler, but I can't figure out the correct path:

<form id="myForm">
  <label id="labelForInput" for="inputField">LABEL</label>
  <input id="inputField">
  <input id="submitButton" type="submit" value="Send"/>
</form>

<script>
  document.getElementById("inputField").addEventListener("click", clickHandler);

  function clickHandler(event) {
      // onClick on input element, the label's color changes to red:
      event.srcElement.labels[0].style.color='red';
  }

  document.getElementById("myForm").addEventListener( "submit", {return submitHandler} );

  function submitHandler(event) {
      // What's the path to change the label's color to 'green' upon click on submit button?
      // **???** .style.color='`green';
      return false;
  }
</script>

EDIT: Sorry, my question was a bit oversimplyfied. I don't know the labels ids and names in the onsubmit handler, only the input field's names, thus I can't use outright getElementById. Actually, in the paticular case, the labels don't have ids nor names defined, but they are bound to their input fields by 'for='. I'm looping over an array containing the input field names and I want to change a label's color upon a condition:

const fieldNames=['form_name','form_email','form_message'];
const fieldConds=[true, false, true];

function submitHandler(event) {
  fieldConds.forEach( (value, idx) => { 
            if (!value) { ... CHANGE COLOR ... }
}

So, I think what I'm looking for is something like callingFormObject.inputFields[].label.style.color , like I used in clickHandler. But in onsubmit, the event object seems to only contains the string representing the form, no property fields.

CodePudding user response：

You can directly set the label's color to green using its ID in your handler function:

document.getElementById("labelForInput").style.color = "green";

CodePudding user response：

    document.getElementById("myForm").addEventListener( "submit", submitHandler);

  function submitHandler(event) {
      //so it doesnt refresh your page
      event.preventDefault()
      //grab form element
      const formEl = event.currentTarget
      //grab label element
      const label = formEl.querySelector("#labelForInput")
      label.style.color = "green"
      return false;
  }

<form id="myForm">
  <label id="labelForInput" for="inputField">LABEL</label>
  <input id="inputField">
  <input id="submitButton" type="submit" value="Send"/>
</form>

Try the following:

  function submitHandler(event) {
      //so it doesnt refresh your page
      event.preventDefault()
      //grab form element
      const formEl = event.currentTarget
      //grab label element
      const label = formEl.querySelector("#labelForInput")
      label.style.color = "green"
      /*or you can select all labels
      const labels =  formEl.querySelectorAll("label")
      labels[0].style.color = "green"
      */
      return false;
  }