Question

当我尝试在h1标签中打印js变量时，它仅打印2毫秒，然后消失。

function validateForm() {
  // alert("hello");
  var name = document.myform.name.value;
  document.getElementById("a1").innerHTML = name;
  // document.myform.write.value= name; 
}

<html>

<head>

  <title>
    js 1
  </title>
</head>

<body>

  <form name="myform" onSubmit="return validateForm();">
    Name<input type="text" name="name"><br> Password <input type="text" name="password"><br><br>

    <h1 id="a1"></h1>
    <input type="submit" value="submit"><br>
  </form>
</body>

</html>

我希望输出显示用户输入的名称，并且该名称应该可见，直到用户第二次输入其他名称。

Answer 1

这是因为按钮类型正在提交，您的发件人将立即提交。如果要保留在同一页面上，可以将按钮的类型从“提交”更改为“输入”。

 <input type="button" value="submit"><br>

或：：使用event.preventDefault();中和该事件。

<script type="text/javascript">
  function validateForm(){
     // alert("hello");
      var name=document.myform.name.value;
      document.getElementById("a1").innerHTML = name  ;
     // document.myform.write.value= name; 
     event.preventDefault();
  }
</script>
<form name="myform" onSubmit="return validateForm();">
  Name<input type="text" name="name"><br>
  Password <input type="text" name="password"><br><br>

  <h1 id="a1"></h1>
  <input type="submit" value="submit"><br>
</form>

Answer 2

在validateForm函数中，您可以return false阻止提交表单和重新加载页面。

function validateForm() {
   document.getElementById("a1").innerHTML = document.myform.name.value;
   return false;
}

<form name="myform" onsubmit="return validateForm();">
Name<input type="text" name="name"><br>
Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>

Answer 3

您的表单将立即提交，因此页面会重新加载。

从事件处理程序中返回false，以防止这种情况发生。

function validateForm() {
    var name = document.myform.name.value;
    document.getElementById("a1").innerHTML = name;
    return false;
}

我无法在html中打印js变量

3 个答案: