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

Oskar.p

Oskar.p

Mitglied
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.

HTML: 
<!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>
 
Zuletzt bearbeitet von einem Moderator:
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)

Java: 
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 hat gesagt.:
funktioniert es immer noch nicht.
Zum Vergrößern anklicken....
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:
HTML: 
<!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
Javascript: 
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();;
}
);
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

Wie gebe ich Informationen von einer Klasse zur anderen Klasse?
Antworten: 9
Wie gebe ich einen Dateipfad in RandomAccessFile an?
Antworten: 2
Ich gebe eine ArrayList als List zurück per MEthode, wie kann ich nun aber die ArrayList speichern?
Antworten: 46
Wie gebe ich den Source Code ohne Kommentare aus?
Antworten: 4
Wie gebe ich den Inhalt aus?
Antworten: 17

Zurück
Oben