Как мне настроить свою веб-страницу для ввода данных из текстового поля и использования его в качестве нового текста на странице?

Question

Я пытаюсь создать веб-приложение, которое работает как флэш-карты, но мне нужно иметь возможность брать то, что пользователь вводит в учебник, и добавлять его на страницу. Вот что я нашел, но я хочу, чтобы текст был встроен.

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

javascript html input output

2

Parshall Mice 31 Окт 2014 в 21:47

2

Что ты имеешь в виду под встроенным?? сделать его частью тега

или , а не текстовым полем? если да, то 'document.getElementById (идентификатор тега). innerHTML = "Привет, " + name + "!"', как указано здесь

–

shakirthow

31 Окт 2014 в 21:52

Если вы хотите сохранить эти результаты, лучше всего отправить текст POST на страницу, которая обрабатывает запрос с помощью PHP и сохраняет его в базе данных MySQL.

–

Joe Swindell

31 Окт 2014 в 22:00

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

1

Kabb5 31 Окт 2014 в 22:02

Answer 2

Изменить: вы также можете использовать JQuery: Вот скрипка

Если вы не хотите использовать 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 — это идентификатор элемента, который вы хотите изменить.

1

Mallen 31 Окт 2014 в 22:21

Как мне настроить свою веб-страницу для ввода данных из текстового поля и использования его в качестве нового текста на странице?

2 ответа

Похожие вопросы

Новые вопросы

javascript