如何设置我的网页以从文本字段中获取输入并将其用作页面上的新文本？答案

【问题标题】：How do I set up my webpage to take input from a text field and use it as new text on the page?如何设置我的网页以从文本字段中获取输入并将其用作页面上的新文本？
【发布时间】：2014-12-28 04:14:18
【问题描述】：

我正在尝试制作一个可用作闪存卡的网络应用程序，但我需要能够将用户键入的内容输入教科书并将其添加到页面中。这是我找到的，但我希望嵌入文本。

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>textBoxes.html</title>
 <script type = "text/javascript">
  // from textBoxes.html
  function sayHi(){
  var txtName = document.getElementById("txtName");
  var txtOutput = document.getElementById("txtOutput");
  var name = txtName.value;
  txtOutput.value = "Hi there, " + name + "!"
  } // end sayHi
 </script>
 <link rel = "stylesheet"
   type = "text/css"
   href = "textBoxes.css" />
 </head>
 <body>
 <h1>Text Box Input and Output</h1>
 <form action = "">
  <fieldset>
  <label>Type your name: </label>
  <input type = "text"
    id = "txtName" />
  <input type = "button"
    value = "click me"
    onclick = "sayHi()"/>
  <input type = "text"
    id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>

【问题讨论】：

嵌入式是什么意思？？使其成为
或标签的一部分，而不是文本字段？如果是这样'document.getElementById（标签的id）。 innerHTML = "你好，" + name + "!"' 就像它提到的 here
如果你想保存这些结果，最好的办法是把文本发布到一个页面，用 PHP 处理请求并将其保存到 MySQL 数据库中。

标签： javascript html input output

【解决方案1】：

查看AngularJS。它可以做你想做的事。还有更多！

var app = angular.module('app', []);

app.controller('AppCtrl', function($scope) {
  $scope.name = "";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="AppCtrl">
  <input type "text" placeholder="Enter your name" ng-model="name" />

  <h3>Hello<span ng-show="name">, </span>{{name}}!</h3>
</div>

【讨论】：

【解决方案2】：

编辑：您也可以使用 JQuery：Here's a fiddle

如果您不想使用 Angular，这可行：

  function writeToElement(id, value){
    var target= document.getElementById("id");
    if (target) {
        target.innerHTML = value;
        return target;
    } else {
        return false;
    }
  }

然后您可以将 onClick 设置为writeToElement(someId, this.value)，其中someId 是您要更改的元素的 id。

【讨论】：