Question

说明：

在index.html和script.js文件中，添加以下内容：


将您的JavaScript文件链接到HTML文件

在HTML内，创建一个包含三个输入的表单：

名字

中间名

姓氏



在JavaScript文件中创建名为nameInfo的函数

在函数中，创建三个变量：firstName，middleName，lastName

使用DOM提取每个输入的信息并将其设置为适当的变量



接下来，创建另一个名为fullName的变量，并将其设置为三个变量的总和。

在HTML中，创建一个ID为“ <p>”的空fullName标记

在您的函数中，使用DOM innerHTML将变量fullName发布到ID为“ <p>”的空白fullName

最后，在HTML中，添加一个使用onclick来调用函数nameInfo的按钮

index.html：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>
<body>
  <p id="fullName"></p>
  <form>
   <input id="First Name" type="text"/>
   <input id="Middle Name" type="text"/>
   <input id="Last Name" type="text"/>
   <button onclick="nameInfo">Submit</button>
 </form>
<script src="script.js"></script>

</body>

</html>

script.js

function nameInfo(){
  var firstName=document.getElementById('firstName').value;
  var middleName=document.getElementById('middleName').value;
  var lastName=document.getElementById('lastName').value;

  var fullName= firstName+middleName+lastName;
  var text = document.getElementById("fullName").innerHTML;
}

该表单应显示文本。使它正常工作的唯一其他方法是删除表格并将其留在正文中，说明中需要表格

Answer 1

您的输入元素的ID名称中不能有空格，onClick应该是驼色的，而不是onclick，我也添加了onsubmit =“ return false”属性以防止页面重新加载

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <p id="fullName"></p>
  <form onsubmit="return false">
   <input id="firstName" type="text"/>
   <input id="middleName" type="text"/>
   <input id="lastName" type="text"/>
   <button onClick="nameInfo()">Submit</button>
  </form>
  <script src="script.js"></script>

</body>

</html>

和script.js几乎相同，但有一些小的更改。请注意，您仍然可以使用var，但是我更喜欢const

function nameInfo(){
  const firstName=document.getElementById('firstName').value;
  const middleName=document.getElementById('middleName').value;
  const lastName=document.getElementById('lastName').value;

  const fullName = firstName + ' ' + middleName + ' ' + lastName;
  document.getElementById('fullName').innerHTML = fullName;
}

Answer 2

var form = document.querySelector('#myform')

form.addEventListener('submit', function(e){
e.preventDefault()

var first = form.elements['first'].value
var middle = form.elements['middle'].value
var last = form.elements['last'].value


document.querySelector('#fullName').innerText = first +' '+ middle +' '+ last
})

<body>
  <p id="fullName"></p>
  <form id="myform">
   <input id="First Name" name="first" type="text"/>
   <input id="Middle Name" name="middle" type="text"/>
   <input id="Last Name" name="last" type="text"/>
   <button>Submit</button>
 </form>
<script src="script.js"></script>

</body>

Answer 3

在nameInfo函数的最后一行中，您提取了段落的值，但是应该使用全名。

有关html和javascript的介绍，您可以访问w3schools。

如何在JavaScript中正确显示表单元素文本

3 个答案: