• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Input Element ausgeben

L

LeCub

Aktives Mitglied
Hi Ich bin noch recht neu in Javascript und hätte folgendes Problem: Ich möchte gerne die Daten die der Nutzer in das Url- Inputfeld eingibt(siehe unten) in einem Div ausgeben. Leider steht in dem Div immer nur "HTMLInputElement". Mit Sicherheit ein dummer Anfängerfehler aber ich würde mich trotzdem über Hilfe freuen.

HTML: 
<input type="url" id="eingabe" placeholder="Gib eine Url ein">
<input type="button" value="Speichern" id="button" onclick="ausgabe()">
  <!-- Hier soll die Url des Nutzers ausgegeben werden-->
    <div id="ausgabefeld"></div>
<script>
  function ausgabe() {
document.getElementById("ausgabefeld").innerHTML = eingabe;
    }
    </script>
 
Werbung:
Tu dir einen Gefallen und lerne JS anhand von Frameworks, das ist bedeutend einfacher. Ungetüme wie document.getElementById('foo').innerHTML verwendet man heute nicht mehr.

Folgender Code überträgt den Inhalt des Inputs automatisch in das darunter liegende Tag, ohne dass man eine einzige Zeile JavaScript schreiben müsste. Die eingebundene Library im Head macht es möglich.

Code: 
<!doctype html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  </head>
  <body>
    <input type="text" ng-model="ausgabe">
    <p>{{ausgabe}}</p>
  </body>
</html>
 
Werbung:
Das Ganze lässt sich natürlich auch als Click-Event abbilden. In dem Fall muss man etwas Code schreiben. $scope.ausgabe ist hier nur eine andere Formulierung für var ausgabe.

Code: 
<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="InputController">
      <div class="form-group" >
        <input class="form-control" type="text" ng-model="eingabe">
      </div>
      <button class="btn btn-primary" ng-click="clickMe()">Klick Mich</button>
      <p>{{ausgabe}}</p>
    </div>
   
    <script>
      angular.module('myApp', [])
        .controller('InputController', ['$scope', function($scope) {
          $scope.ausgabe = '';
          $scope.clickMe = function() {
            $scope.ausgabe = $scope.eingabe;
          };
        }]);
    </script>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben