having trouble altering DOM from function

March 6, 2024

thanks for clicking.

I am new to JS and just like dinking around for fun but I am having trouble getting this function to work. I have tested it with google chrome alert('incorrect'); and it works but whenever I try running a style display property nothing happens.

any help is much appreciated & thank you in advance!

function validate() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "14") {
    pwForm.display.style = "none";
  }
}

<form name="myForm" onsubmit="validate()" id="passwordForm">
      <input
        id="passwordPrompt"
        type="text"
        placeholder="how many years?"
        name="fname"
      />
      <input type="submit" value="Submit" />
    </form>

>Solution :

Few issues in your code. First, the pwForm variable is not defined, and second, the correct property to manipulate the display style is style.display, not display.style.

Also, you probably need to stop the form submission to stay on the page.

function validate() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "14") {
    document.getElementById("passwordForm").style.display = "none";
  }
  return false;//prevent the form submission to stay on the page
}

<form name="myForm" onsubmit="return validate()" id="passwordForm">
  <input
    id="passwordPrompt"
    type="text"
    placeholder="how many years?"
    name="fname"
  />
  <input type="submit" value="Submit" />
</form>