# Wie gebe ich einen "Input" einer Website, an einer anderen Stelle wieder aus?



## Oskar.p (15. Feb 2021)

Hallo,
ich bin noch neu in dem Gebiet. Es auch sein kann das dies ein leichter Fehler in meinem Programm ist. Ich Versuche Gerade mithilfe des "<input>" Tags in Html, den Input den man dort reinschreibt auszugeben, aber an einer anderen stelle (z.B.: Eingabefeld ist ganz links und Ausgabe ist ganz rechts). Ich habe schon einiges Versucht, bin aber daran gescheitert(liegt wohl daran, dass ich neu auf dem Gebiet bin), ich hoffe mal einer von euch kann mir dort weiterhelfen.


```
<!doctype html>
    <head>
        <meta content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style1.1.css" type="text/css">
        <title>Ratespiel</title>
        <script>
           function test1(){
                var input;
                input = document.getElementById("myInput");
                document.write(input.value).getElementById("myOutput");    
            }
        </script>
    </head>
    <body>
        <input type="text" id="myInput">
        <button onclick="test1()" id="confBtn">OK</button>
        <p id="myOutput"></p>
    </body>
```


----------



## Thallius (15. Feb 2021)

Mehrere Fehler:

1) Um etwas in HTML auszugeben benutzt man nicht die write() Methode. Diese ist eigentlich nur für Debugger Zwecke gedacht. Zur Ausgabe von Text innerhalb eine Dokumentes setzt man den textContent
2) Du must natürlich erst das element holen und kannst dann dort etwas hineinschreiben nicht anders herum wie in deinem Code. Hier hilft es wenn man am Anfang jeden Befehl in eine eigene Zeile schreibt. Dann kann man nämlich auch dazwischen wunderbar ein paar Debugausgaben machen.
3) Den button event in den button selber zu schreiben ist heutzutage ziemlich verpönt weil man damit HTML und JS code vermischt, was man unterlassen sollte,

Hier mal ein Beispiel wie es besser aussehen würde (ungetestet)


```
function doOutPut()
{
    var inputElement = document.getElementById('myInput');
    // Einfach mal damit du siehst ob auch das richtige element geholt wurde.
    concole.log("Input: " + inputElement.value);
    let outputElement = document.getElementById('myOutput');
    outputElement.textContent = inputElement.value;
}

// hier fügst du einen Eventhandler dem Button hinzu.
document.getElementById("confBtn").addEventListener("click", function() {
    // Du könntest natürlich hier auch direkt die function reinschreiben statt eine weitere aufzurufen
      doOutPut();;
});

<body>
    <input type="text" id="myInput">
    <button id="confBtn">OK</button>
    <p id="myOutput"></p>
</body>
```

Gruß

Claus


----------



## Oskar.p (18. Feb 2021)

Hallo,
leider kann ich mich erst jetzt melden. Ich habe das eben ausprobiert und leider funktioniert es immer noch nicht.


----------



## M.L. (18. Feb 2021)

Oskar.p hat gesagt.:


> funktioniert es immer noch nicht.


Mit den Entwicklertools von Google Chrome *könnte* man das Problem eingrenzen  (Spoiler: https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null )
Ansonsten könnte man den Code-Vorschlag auf zwei Dateien ausweiten:

```
<!doctype html>
    <head>
        <meta content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style1.1.css" type="text/css">
        <title>Ratespiel</title>
</head>
<body>
    <input type="text" id="myInput">
    <button id="confBtn">OK</button>
    <p id="myOutput"></p>
    <script src="main.js"></script>
    </body>
```

main.js

```
function doOutPut()
{
    var inputElement = document.getElementById('myInput');
    // Einfach mal damit du siehst ob auch das richtige element geholt wurde.
    console.log("Input: " + inputElement.value);
    let outputElement = document.getElementById('myOutput');
    outputElement.textContent = inputElement.value;
}
// hier fügst du einen Eventhandler dem Button hinzu.
//if(inputElement) {
document.getElementById("confBtn").addEventListener("click", function() 
{
    doOutPut();;
}
);
```


----------



## Oskar.p (18. Feb 2021)

Okey werde es ausprobieren, Danke!


----------



## Oskar.p (20. Feb 2021)

Okey es hat geklappt, danke nochmals !!!


----------

