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

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:

Thallius

Top Contributor
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
 

M.L.

Top Contributor
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:
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();;
}
);
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
L JSON-Daten aus einen Server mit fetch holen Angular, React, JQuery - Fragen zu JavaScript 3
B Quiz Fragen in einem Array nach drücken auf einen Button abfragen Angular, React, JQuery - Fragen zu JavaScript 5
T Ich möchte einen Button mit JavaScript ausblenden Angular, React, JQuery - Fragen zu JavaScript 5
S Suche Lösung für einen Slider mit Textverlinkung Angular, React, JQuery - Fragen zu JavaScript 2
R Anleitung für einen Konfetti Regen Angular, React, JQuery - Fragen zu JavaScript 9
D Ein Skript, dass einen Menühintergrund "faden" kann Angular, React, JQuery - Fragen zu JavaScript 3
M Bilder mit Java in einen Iframe laden Angular, React, JQuery - Fragen zu JavaScript 3
D Mehrere Links mit einen Klick Angular, React, JQuery - Fragen zu JavaScript 4
D wie integriere ich ein java-sript in einen htm-code? Angular, React, JQuery - Fragen zu JavaScript 2
C mehrere <a href > in einen integrieren Angular, React, JQuery - Fragen zu JavaScript 4
G Nach dem Laden der Seite einen JS in einem I-Frame ausführen Angular, React, JQuery - Fragen zu JavaScript 6
C ins Inputfeld einen Text übergeben Angular, React, JQuery - Fragen zu JavaScript 7
B Einen Timer für Windows Angular, React, JQuery - Fragen zu JavaScript 4
S Mouseover mit einen Text? Angular, React, JQuery - Fragen zu JavaScript 4
A Brauche hilfe bei einen Servlet Angular, React, JQuery - Fragen zu JavaScript 8
L Inhalt von Input in Variable speichern, zurücksetzen mit Java Angular, React, JQuery - Fragen zu JavaScript 1
Zeppi Hidden input field Angular, React, JQuery - Fragen zu JavaScript 6
d.lumpi in javascript input erstellen Angular, React, JQuery - Fragen zu JavaScript 4
J 2x Input verknüpfen Angular, React, JQuery - Fragen zu JavaScript 14
S Input Feld soll leer bleiben Angular, React, JQuery - Fragen zu JavaScript 5
O Mit JavaScript ein leeres Input Field auf den Wert "0" setzen? Angular, React, JQuery - Fragen zu JavaScript 2
F input dynamisch beeinflussen Angular, React, JQuery - Fragen zu JavaScript 3
B input value - RGB zu HEX - bgcolor ändern Angular, React, JQuery - Fragen zu JavaScript 2
E input type=reset und JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
M Input Feld hinzufügen Angular, React, JQuery - Fragen zu JavaScript 3

Ähnliche Java Themen

Neue Themen


Oben