Html Input in Javascript ausgeben?

Ich würde gerne einen HTML Input Text in Javascript ausgeben lassen.

Dazu habe ich bereits ein Script erstellt, in dem ich einer Variable den Wert des HTML Input gebe(Es geht um die Variable "VorName"), mit Hilfe von "document.getElementById". Allerdings will die Variable den Wert nicht annehmen/ändert ihn nicht.

Ich habe auch onclick angewendet

Bild zum Beitrag

Warum funktioniert das nicht? ) :

Danke im voraus für Tipps und Hilfe

3 Antworten

Fridleif

27.06.2021, 19:55

Hier stand Quatsch ...

Aber trotzdem: was ist die Funktion CoolesDing()?

Newyorkshire

Fragesteller

27.06.2021, 19:59

Ach so, das war wie ich die Funktion vorher genannt habe(da steht jetzt wie bei den anderen Infos()). Macht aber nichts aus.

Fridleif

27.06.2021, 20:01

@Newyorkshire

Naja mein Gedanke war, Du wolltest den Rückgabewert der Funktion dem h3 Element zuweisen. Dashalb hätte es wegen des Funktionsnamens nicht geklappt.

Btw. mach doch das nächste mal einen richtigen Screenshot bitte ;)

Statt des return nutz mal die Zuweisung zum Element. Das wird vermutlich besser helfen.

regex9

27.06.2021, 20:10

@Newyorkshire

Demzufolge sollten deine onclick-Attribute nicht direkt Infos aufrufen.

Du könntest es so formulieren (wobei dir vielleicht noch ein besserer Name für handleClick einfällt):

const outputElement = document.getElementById("EndText");

function handleClick() {
  outputElement.innerText = Infos();
}

handleClick();

und handleClick wird zudem als Wert der onclick-Attribute gesetzt.

Oder noch eleganter, da so eine klare Trennung zwischen HTML und JavaScript erfolgt:

1) Du gibst dem Button noch eine ID.

2) Du hängst EventListener an Button und Eingabefeld und entfernst dafür die onclick-Attribute.

document.getElementById("buttonID").addEventListener("click", handleClick);
document.getElementById("inputFieldID").addEventListener("click", handleClick);

Newyorkshire

Fragesteller

27.06.2021, 20:01

Ich habe einfach einen random-Namen genommen, den ich dann hier für gute Frage.net aber nicht gut fand und dann in Infos() geändert habe xD

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

27.06.2021, 20:00

Sofern der Text aus dem Eingabefeld in dem h3-Element ausgegeben werden soll, ändere Zeile 59 um:

document.getElementById("EndText").innerText = Alles1 + Alles2;

Da der Text kein HTML beinhaltet, ist das innerText-Property ausreichend. Einen return-Befehl brauchst du nicht, da dieser Rückgabewert vom Aufrufer nicht persistent aufgefangen werden würde.

In Zeile 40 solltest du zudem noch ein Leerzeichen vor das id-Attribut setzen.

Newyorkshire

Fragesteller

27.06.2021, 20:07

Danke, es klappt😄🤗 danke danke danke xD

Timpanyy

27.06.2021, 19:59

Dein Button ruft effektiv nur eine Methode auf, die ganz viele Variablen deklariert und initialisiert, aber damit nichts macht

Newyorkshire

Fragesteller

27.06.2021, 20:01

Also was kann ich dagegen tun?

Timpanyy

27.06.2021, 20:09

@Newyorkshire

du packst document.getElementById("EndText").innerHTML = Alles1 + Alles2 an's Ende deiner Infos() Funktion und lässt das return weg. Übrigens werden auch in JavaScript Variablen und Funktionen mit lowerCamelCase benannt

Ähnliche Fragen

Javascript Variable mit HTML ausgeben?

Ich frage den Nutzer wie sein Vorname ist.

let vorname = prompt("Wie lautet dein Vorname?");

Nun möchte ich das eingegebene auf der Seite Ausgeben.

Als dass da z.B. steht: Hallo Max

Wie kann ich das umsetzen? (Bin Anfänger)

Vielen Dank für eure Hilfe.

...zur Frage

Was funktioniert mit meinem Java Script/html code nicht?

Ich versuche gerade eine einfache Passwortabfrage mit Javascript zu programmieren. Ihr müsst mir auch nicht erst sagen das ich es lieber mit php machen sollte, ich weiß dass das überall steht aber das kapier ich überhauptnicht. Hier ist mein code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            let rightpass = 'hallo';
            let inpu = document.getElementById(input);
            let dkfjl = inpu == rightpass;
            function passwortabfrage() {
                if (dkfjl) {
                    alert('Es hat geklappt')
                } else {
                    alert('failed')
                }
            }
        </script>
    </head>
    <body>
        <form>
        <input type="text" id="input" >
        <input type="submit" onclick="passwortabfrage()">
        </form>
    </body>
</html>

Es geht mir dabei im Moment nicht um Sicherheit, sondern nur darum zu wissen wie was nicht funktioniert. Viele Grüße und Danke für eure Antworten

...zur Frage

JavaScript Funktion Summe?

Hallo ich möchte ein einfaches Programm scheiben was von zwei input feldern die Zahlen nach button Bestätigung zusammenrechnet. Bin mir bei meinem Code nicht sicher. Es addiert die Zahlen nicht sondern schreibt sie zusammen. 1+2=12

<script>
function summe()
{
var z1=document.getElementById('zahl1').value;
var z2=document.getElementById('zahl2').value;


var ergebnis= (z1+z2);
document.write("Das Ergebnis ist:"+ ergebnis);
}
</script>
<input type=text id="zahl1">
<input type=text id="zahl2">
<input type=button onclick="summe()" value="=">
</body>

...zur Frage

Bild aus einem Input mit Javascript anzeigen?

Ich würde gerne, dass man eine Datei hochlädt und mit einem Button dann auf der Seite anzeigen lassen kann. Ich habe schon etwas rum probiert und es kommt immer nur " [object HTMLImageElement] " raus.

Mein Code ist dieser:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function anzeigen() {

            let bild = new Image();
            bild.src = document.getElementById("input");

            document.getElementById("bild").innerHTML = bild;

        }


    </script>
</head>
<body>
    <input type="file" accept="image/png, image/jpg" id="input">
    <input type="button" onclick="anzeigen();">
    <div id="bild">



    </div>
</body>
</html>

Das hochladen von Dateien funktioniert perfekt. Nur wird das Bild nicht angezeigt.

(Bin Anfänger)

Danke für eure Hilfe^^

...zur Frage

JavaScript in HTML - Ausgabe?

Hallo wie kann ich in einem Textfeld von HTML eine variable von JavaScript ausgeben?

Würde gerne mehrere Sachen zusammenrechnen und anschließend das Ergebnis auf der HTML Webseite ausgeben...

Wie ist das möglich?

Danke schon mal

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

HTML / JS: Wie kann ich mehrere Sachen aus dem localStorage ausgeben?

Hallo,

ich habe vor, eine Benutzerverwaltungssoftware zu programmieren. Jedoch bin ich auf ein Problem gestoßen.

Bei der unteren Artikelnummer kann man eine Art Schlüssel eingeben, welcher aber nicht gleich wie die Artikelnummer sein muss.

z.b. so..

Wenn man dann auf Suchen klickt und die Artikelnummer 01 eingibt, sollte es mir alles ausgeben. Das heißt, die Artikelnummer, Beschreibung, den Lagerplatz, usw..

Das habe ich bis jetzt alles:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Alle Artikel</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Artikel Nr.</td>
        <td>Beschreibung</td>
        <td>Lagerplatz</td>
        <td>Bestand</td>
        <td>Preis</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="Artikel" value="" type="text" />
        </th>
        <th>
          <input id="Beschreibung" value="" type="text" />
        </th>
        <th>
          <input id="Lagerplatz" value="" type="text" />
        </th>
        <th>
          <input id="Bestand" value="" type="text" />
        </th>
        <th>
          <input id="Preis" value="" type="text" />
        </th>
      </tr>
    </tbody>
  </table>
  Artikel Nr.: <input id="Schlüssel" value="" type="text" />
  <input type="button" value="speichern" onclick="speichern()" />
  <input type="button" value="Artikel suchen" onclick="suche()" />
</body>
</html>
<script>
  function speichern() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    var Artikel = document.getElementById('Artikel').value;
    var Beschreibung = document.getElementById('Beschreibung').value;
    var Lagerplatz = document.getElementById('Lagerplatz').value;
    var Bestand = document.getElementById('Bestand').value;
    var Preis = document.getElementById('Preis').value;

    window.localStorage.setItem(Schlüssel, Artikel, Beschreibung, Lagerplatz, Bestand, Preis);
  }

  function suche() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    document.getElementById('Artikel').value = window.localStorage.getItem(Schlüssel);
  }
</script>

Ich danke für eure Hilfe.

Gruß

...zur Frage

Javascript fehler Button Disable?

Das Script erstellt 3 Button, 2 Zum Aktivieren und zum Deaktivieren. Zu Testzwecken noch ein simples Mini-programm. Aber irgendwie funktioniert das nicht.

<button onclick="locker(1)">Lock</button>

<button onclick="locker(2)">Unlock</button>

<input type="button" onclick="tellMessage()" id="btn01" value="OK">

<script>

var mtd = ("")

var a =

function locker(a) {

if (a = 1){

document.getElementById("btn01").disabled = true;

}

else

if (a = 2){

document.getElementsById("btn01").disabled = false

}

function tellMessage() {

mtd = prompt("Please enter message to display", "Your message...")

alert(mtd)

}

</script>

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

Warum wird alert nicht ausgeführt (Javascript)?

Hi ich Frage mich warum mein alert nicht ausgeführt wird wenn ich auf den buten klicke ...könnte jemand der Javascript beherrscht mir den Fehler sagen ?

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert ("willkommen hier");

</script>

var beschreibung = "super,mega,hammer";

var alter= 25;

var vergeben = false;

var name = "boy withb the spoon";

var leer = null;

document.write(name + "ist" + beschreibung + alter + "und sein status ist vergeben " + vergeben);

</script>

//diese variable ist sehr komplieziert

function geklickt(){

alert ("willkommen hier zum zweiten mal");

}

</script>

<form>

</form>

</body>

</html>

...zur Frage

Javascript Formular mit Placeholder rechnen?

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen