时间戳

首页 > 解决方案 > 为什么我的 HTML 表单不显示我的输入？

javascript - 为什么我的 HTML 表单不显示我的输入？

问题描述

我对 JavaScript 很陌生，正在创建一个简单的页面来输出表单值。但似乎有一个问题，它没有显示出来。

<html>

<head>

<title>Return first and last name from a form - w3resource</title>

</head>

<body>

<form id="form1" onsubmit="form()">

First name: <input type="text" name="fname" value="David"><br>

Last name: <input type="text" name="lname" value="Beckham"><br>

<input type="submit" value="Submit">

</form>

<p id="firstname"></p>

<script>
function form() {
  var x = document.getElementById("form1").elements[0].value;
  document.getElementById("firstname").innerHTML = x;
}
</script>

</body>

</html>

我似乎找不到任何问题，控制台的代码很好。

标签： javascripthtml

解决方案

使用事件侦听器来处理提交并使用 preventDefault() 来停止提交。以下代码经过测试并且可以正常工作。

<html>
  
  <head>
  
    <title>Return first and last name from a form - w3resource</title>
  
  </head>
  
  <body>
  
    <form id="form1">
  
      First name: <input type="text" name="fname" value="David"><br>
  
      Last name: <input type="text" name="lname" value="Beckham"><br>
  
      <input type="submit" value="Submit">
  
    </form>
  
    <p id="firstname"></p>
  
    <script>
      document.getElementById("form1").addEventListener("submit", form);
      function form(e) {
        e.preventDefault();
        var x = document.getElementById("form1").elements[0].value;
        document.getElementById("firstname").innerHTML = x;
        
      }
    </script>
  
  </body>
  
  </html>
  <script src="script.js"></script>
</body>
</html>

推荐阅读