Frage von Hanniball253, 47

Wie kann ich mit Javascript auf ein input type="text"-Feld zugreifen und bei einer bestimmten Texteingabe eine Aktion auslösen?

Hallo alle zusammen! Ich probiere mich gerde ein bisschen an Javascript (mit HTML und CSS habe ich schon ein kleines bisschen Erfahrung) und bin am Verzweifeln! Es wird eine Art digitaler Adventskalender, bei dem sozusagen ein (realer) Zettel ausgepackt wird, auf dem ein Code steht. Wenn man diesen in das Textfeld meine html-Datei eingibt, soll eine bestimmte Datei geöffnet werden, auf die in verwiesen wird. Zum Öffnen der Datei bin ich noch nicht gekommen, weil mein Zugriff auf das Textfeld name="code" irgendwie immer falsch zu sein scheint, bzw. das, was dannach kommt... Ich habe hier versucht, bei Eingabe "Hallo" einen alert auszulösen, aber es tut sich einfach nichts :(( Ich habe schon allerlei Methoden ausprobiert, die ich so in Onlineforen gefunden habe, aber nichts scheint zu helfen. Kann mir jemand sagen, wo mein Fehler ist? Das ist mein Code im body (leider werden die <> hier nicht richtig angezeigt):

<body>
    <div>
        <form name="formular">
                <input type="text" name="code"/>
                <input type="image" id="button" src="database/button1.png" class="buttons" width="13%" onclick="link()"/>
        </form>
    </div>
    
    <script>
        var obj  = document.getElementById ("button");
        obj.addEventListener ('click', false);

        function link(
        if (document.formular.code.value == "Hallo")
        {alert("geschafft!!!")};
    </script>
    
</body>

Bei Gelegenheit könnt ihr mir auch gerne sagen, wie ich via CSS auf das Eingabefeld und den Button zugreifen kann, die lassen sich nämlich nicht zentrieren.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Gegengift, 21

Dein Code enthält lediglich Syntaxfehler. Diese kann man mit einer Syntaxprüfung automatisch aufdecken. Am besten im Debugger von Chrome.

Debugging bei Javascript. Folgendes muss man wissen:

- Inline js kann nicht gedebuggt werden (alles was innerhalb einer Html-Datei steht)

- Firefox bietet schlechten Debug-Support und keine Syntaxprüfung

- Javascript generell kann nicht gedebuggt werden (gemeint ist durchsteppen - gemeint ist nicht Syntaxprüfung (rote Unterringelung)), solange das .js Syntaxfehler enthält

Vorgehensweise:

- Alles zwischen den Script-Tags in eine separate .js-Datei auslagern

- das übriggebliebende Script-Tag mit einer Adresse zur .js-Datei versehen

In HTML 5 reicht: <script src="beliebigerName.js"></script>

- Html Datei z.B. im Chrome öffnen und F12 drücken (in allen Browsern gleich)

- Bereits jetzt siehst du wo die Fehler liegen. Sauber formatiert kann man gleich 3 fehlende Klammern entdecken


Kommentar von Hanniball253 ,

Vielen Dank! Das mit F12 muss ich mir dringend merken, verdammt praktisch :D

Kommentar von perhp ,

Nur zu einen hilfreichen Tipp so nebenbei. Normalerweise installiert man das Plugin JQuery und das ermöglicht einen viel schneller auf die Variablen zuzugreifen zB:

statt:

var obj = document.getElementById ("button");
obj.addEventListener ('click', false);

kannst du machen:

var obj = $('#button');
obj.on('click', function(){
....
}
Antwort
von RakonDark, 47

Als erstes solltest Du einen Debugger benutzen , den so wie das da oben steht sind Fehler drinne . Das JavaScript bricht also schon ab beim Parsen der Befehle .

FireFox mit Webdeveloper Tools

oder bei Chrome Entsprechend die Entwickler Systeme etc .

Kommentar von Hanniball253 ,

Was sind denn die Fehler? Das war ja eben meine Frage.

Kommentar von RakonDark ,

Dafür gibt es debugg tools . Die sollte man einfach mal nutzen .

Die sagen Dir dann die Fehler . Such mal bei google Javascript debuggen bze JavaScript Fehlersuche

http://www.peterkropff.de/tutorials/javascript_fehler/laufzeit_debugging_1.htm

Antwort
von userfromberlin, 34

Du hast

1. vergessen die Funktion aufzurufen beim EventListener

und

2. Syntaxfehler.

Antwort
von yerooke, 29

Das wird dir weiter helfen (auf die schnelle gemacht)

https://jsfiddle.net/qL4mLuwk/

Kommentar von Hanniball253 ,

Das ist ja eigentlich nichts anderes, als ich schon gemacht habe? und es funktioniert auch nicht, wenn ich es in meine Datei kopiere.

Kommentar von RakonDark ,

von kopieren hat auch keiner was gesagt , es zeigt dir aber wie es geht . Odr dachtest Du wirklich wir machen das für dich ?

Kommentar von Hanniball253 ,

Ja durchaus, ich möchte wissen, wie es geht. Das war ja die Frage.

Sie kennen die Antwort?

Fragen Sie die Community