从函数更改 DOM 时遇到问题

Question

感谢您的点击。

我是 JS 新手，只是喜欢闲逛以取乐，但我无法让这个功能正常工作。我已经用 google chrome

alert('incorrect');

对其进行了测试，它可以工作，但是每当我尝试运行样式显示属性时，什么也没有发生。

非常感谢任何帮助并提前感谢您！

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>

Answer 1

您的代码中几乎没有问题。首先，未定义

pwForm

变量，其次，操作显示样式的正确属性是

style.display

，而不是

display.style

。

此外，您可能需要停止表单提交才能留在页面上。

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>