如何从HTML<输入>元素设置为<span>使用JavaScript.innerHTML

How to send information from HTML <input> element to <span> using JavaScript .innerHTML?

本文关键字：gt lt 使用 span innerHTML JavaScript 设置 输入 HTML 元素      更新时间：2023-09-26

我对JavaScript非常陌生，并试图模仿我正在读的书中的一个例子。我想把输入的内容输入到HTML元素中，并使用.innerHTML将数据发送到元素中。我不知道哪里出了问题。

<!DOCTYPE html>
<html>
<head>
 <title>JS Form</title>
</head>
<body>
   <form id="date">
     <table>
      <tr><td><input type="text" name="user" placeholder="Please input name"    onchange="greeting();"></td>
      </tr>
      <tr><td><span id="hello"></span></td>
      </tr> 
     </table>
   </form>
<script type="text/javascript">
   function greeting() {
     var user = document.date.user.value;
     var hello = document.getElementById("hello");
     hello.innerHTML = "How are you " + user;
   }
</script>
</body>
</html>

将name="date"添加到表单标记中，如下所示。否则document.date.user.value将不起作用。

<form id="date" name="date">

解决此问题的另一种方法是访问window对象的date属性。

window.date.user.value;

这是可能的，因为您在表单上设置了id。

或者您可以考虑使用id访问form，然后获得如下用户值：

var user = document.getElementById("date").user.value;

为了简化，根据您的浏览器，您可以使用document.querySelector。看看这个非常有用的SO帖子：JavaScript：如何获取文本输入字段的值？

您应该首先执行以下操作：

var user= document.getElementsByName("user");
var hello = document.getElementById("hello");
 hello.innerHTML = "How are you " + user[0].value;
相关文章：