Prawin: Input html js problem

Wieso funktioniert dieser code nicht?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <script type=text/javascript> function hallo() { var name= document.getElementById("name"); alert(name + "hallo") } </script> </head> <body> <form> <input type=text id= "name" placeholder= name /> <input type=submit onclick= hallo() /> </form> </body> </html>
  1. Hallo Prawin,

    Man sagt Guten Abend oder Hallo oder ähnliches, wenn man irgendwo reinkommt …

    Bis demnächst
    Matthias

    -- Rosen sind rot.
    1. @@Matthias Apsel

      Man sagt Guten Abend oder Hallo oder ähnliches, wenn man irgendwo reinkommt …

      Oder „nuqneH“, aber auch das hab ich mir wieder abgewöhnt.

      Aber da ich fast immer hier bin, trifft „wenn man reinkommt“ auf mich ja nicht zu. 😜

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. hallo

    Wieso funktioniert dieser code nicht?

    <!DOCTYPE html> <html> <head> <title>Page Title</title> <script type=text/javascript> function hallo() { var name= document.getElementById("name"); alert(name + "hallo") } </script> </head> <body> <form> <input type=text id= "name" placeholder= name /> <input type=submit onclick= hallo() /> </form> </body> </html>

    hmmm, also bei mir funzt(tm) es.

    -- Neu im Forum! Signaturen kann man ausblenden!
    1. Bei mir nicht

      1. hallo

        Bei mir nicht

        Dann öffne mal deine Browser Konsole. Da dürfte was drin stehen.

        -- Neu im Forum! Signaturen kann man ausblenden!
    2. hallo

      <input type=submit onclick= hallo() />

      PS: Fehlende Anführungszeichen um um Attributwerte sollte man Spezialisten überlassen.

      -- Neu im Forum! Signaturen kann man ausblenden!
    3. Hallo beatovich,

      hmmm, also bei mir funzt(tm) es.

      hm… wundert mich, es fehlt .value

      Gruss
      Henry

    4. Hallo,

      bei mir funzt der Code auch - für einen gewissen Wert von funzen. Es ist ein ziemlich schräger Wert...

      Dass das .value() fehlt, führt zu der merkwürdigen Ausgabe, "[object HTMLInputElement]hallo" statt Feldinhalt mit hallo hintendran.

      Dass ein click-Handler ohne Anführungszeichen verstanden wird, hat mich aber doch arg verblüfft; da hätte ich Geschrei vom Browser erwartet. Ist aber ganz brav.

      Ein paar Punkte für die Checkliste:

      • Alle HTML-Attribute in Anführungszeichen setzen
      • click-Handler MINDESTENS mal als onclick="hallo(event)" notieren. Der Name event ist nicht wählbar. Es ist eigentlich eine globale Variable, die nur während der Eventbearbeitung definiert ist und das sogenannte Event-Objekt enthält. Dieses Objekt gibt Dir ein paar Möglichkeiten während der Event-Behandlung
      • Den event-Parameter in der hallo-Funktion entgegennehmen. Der Parameter muss dort nicht event heißen, du hast freie Namenswahl.
      • Wie schon geschrieben: Den value des Eingabefeldes ermitteln, nicht nur das DOM-Objekt zum Eingabefeld. Dann klappt's auch mit der Ausgabe
      • Am Ende der hallo-Funktion musst Du ggf. auf dem Event-Objekt die preventDefault() Methode aufrufen, sonst wird nämlich der Submit durchgeführt und die Seite lädt neu. Wenn Du das willst - ok. Wenn nicht: preventDefault().

      Weitere Verbesserungen:

      • Eigentlich behandelt man den Klick auf den Submit-Button über das submit-Event auf dem form
      • Eigentlich registriert man Events nicht mehr über onxxx-Attribute, sondern über addEventListener. Hier ist nur wichtig, dass der Javascript-Code, der die Registrierung ausführt, das HTML Element finden kann auf dem er etwas registrieren will. Dazu muss die Registrierung entweder am Ende des HTML stattfinden, oder in einem DOMContentLoaded Handler untergebracht werden.

      Ach ja. Input-Elemente wollen ein Label haben. Das macht man nicht mit placeholder - das ist nicht von jedem benutzbar

      Rolf

      -- sumpsi - posui - clusi
  3. @@Prawin

    Wieso funktioniert dieser code nicht?

    Weil da so einiges fehlt:

    <!DOCTYPE html> <html>

    1. Die Angabe der Sprache des Inhalts. Ohne diese funktioniert weder die Ausgabe in Screenreadern noch automatische Silbentrennung. Für deutschsprachige Seiten

    <!DOCTYPE html> <html lang="de">

    für englischsprachige

    <!DOCTYPE html> <html lang="en">

    fürs Stylesheet

    html:not([lang]) { ERROR: 'Sprache des Inhalts nicht angegeben'; background: red !important; padding: 2em !important; }

     


     

    <head> <title>Page Title</title>

    2. Die Angabe der Zeichencodierung. Im Gegesatz zur Angabe der Sprache kann diese u.U. auch entfallen, wenn die Zeichencodierung anderweitig angegeben ist (HTTP-Header, BOM); besser ist aber mit.

    Für UTF-8 (eine andere Zeichencodierung solltest du nicht verwenden):

    <head> <meta charset="UTF-8"/> <title>Page Title</title>

     


     

    <input type=text id= "name" placeholder= name />

    3. Die Beschriftung des Eingabefelds. Ohne diese weiß der Nutzer nicht, was in das Feld eingegeben werden soll. Placeholder sind kein Ersatz für Labels!Wirklich nicht!

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      holst Du diesen Text mit Copy+Paste aus irgendeinem Template? Muss doch langweilig werden, das ständig neu zu tippen 😉

      Rolf

      -- sumpsi - posui - clusi
      1. @@Rolf B

        holst Du diesen Text mit Copy+Paste aus irgendeinem Template? Muss doch langweilig werden, das ständig neu zu tippen 😉

        Danke, dass du fragst. Manchmal hole ich Teile des Textes aus anderen Postings, manchmal tippe ich neu. Das hält frisch.

        Eigentlich traurig, dass das noch nicht Allgemeingut ist und immer wieder gesagt werden muss.

        Und dass sich hier alle™ auf das JavaScript stürzen, ohne dem HTML Beachtung zu schenken.

        Und ja, dass du zumindest die fehlende Beschriftung des Eingabefelds erwähnt hattest, habe ich wohlwollend zur Kenntnis genommen.

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. Hallo Prawin.

    Wieso funktioniert dieser code nicht?

    Er funktioniert genau wie von dir beschrieben.

    MfG, at