我无法在 html 中打印 js 变量

当我尝试在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>

我希望输出打印用户输入的名称，并且在用户第二次输入另一个名称之前它应该是可见的。

在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>

这是因为按钮

类型正在提交您的发件人会立即提交。如果要保持在同一页面中，可以将按钮的类型从提交更改为输入。

 <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>

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

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

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

相关内容

最新更新

热门标签：