onclick innerHTML mit Variable funktioniert nicht...

  • Hallo zusammen,


    ich bin am verzweifeln und hoffe Ihr könnt mir helfen.
    Ich lasse mir mit get Date() eine Variable mit dem heutigen Datum erstellen var datum. Diese wird, an dem Punkt an der sie erstellt wurde, mit alert(datum) auch korrekt ausgegeben.
    Nun möchte ich, wenn in das textarea Feld geklickt wird, welches schon den Inhalt aus einer Datenbank enthält, zusätzlich "Ergänzung vom: (datum)" erscheint.
    Dieses einzubinden habe ich mit:

    Code
    echo "<textarea onclick="getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+datum;" class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">";


    probiert. PHP deshalb weil ja noch die db Einträge kommen.
    Als Ergebnis erscheint nun, nach dem Anklicken: Ergänzung vom: [object HTMLInputElement], auch wenn ich bei onclick="alert(datum)" eingebe bekomme ich nur ein [object HTMLInputElement] zurück.
    Kann mir jemand sagen weshalb ich die Variable nicht aufrufen kann?

  • Nun, der INHALT eines Inputfields, was ja das ist, was du verändern möchtest, ist immer das value.
    Wenn du also den Inhalt genau des Inputfields, auf das geklickt wurde, ändern möchtest, heißt der Befehl folgendermaßen:

    PHP
    echo "<textarea onclick="this.value += 'Ergänzung vom: '+datum;" class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">";


    Allerdings wird das so trotzdem nicht gehen, aufgrund der benötigten Anführungszeichen.


    Du siehst ja oben, dass PHP so, wie es jetzt da steht, nur den Text bis [...]onclick= angibt. Sonst wäre das this.value dahinter auch rot.


    Nur, schau mal, was passiert, wenn man die Anführungszeichen so abändert, das es mit dem PHP und HTML klappen würde:

    PHP
    echo '<textarea onclick="this.value += 'Ergänzung vom: '+datum;" class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">';

    Merkste was?


    Also, nimm lieber ein globales JS Skript, was du am Ende der Seiten enbindest, ist zwar mehr Arbeit, dafür kann es dann auch funkionieren :)

  • Sorry, vor lauter hin- und herprobieren. Hatte die " natürlich maskiert.


    Code
    echo "<textarea onclick="getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+datum;" class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">";


    wird aber hier im Codefenster nicht korrekt angezeigt.


    echo "<textarea onclick=\"getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+datum;\" class=\"eingabefeld\" id=\"textfeld\" cols=\"60\" rows=\"20\" name=\"notiz\">";


    Was mich allerdings wundert, beim klicken auf das Textfeld wurde das "Ergänzung vom:" ja korrekt eingetragen. Sprich: das script ist ja soweit korrekt gelaufen, nur mit der Variablen konnte er ja irgendwie nichts anfangen.
    Firebug Konsole zeigte auch keinen Fehler.

  • console.log bringt das gewünschte Datum!
    Jetzt versteh ich gar nichts mehr! ?(


    Gut, jetzt muß ich nur herausfinden warum die Variable in meiner Codezeile als solche nicht erkannt wird.
    Werde mich mal über einen div langsam rantasten.

  • Als Ergebnis erscheint nun, nach dem Anklicken: Ergänzung vom: [object HTMLInputElement], auch wenn ich bei onclick="alert(datum)" eingebe bekomme ich nur ein [object HTMLInputElement] zurück.


    Das sagt mir, dass in var datum nicht das Datum, sondern ein (wie es eben da steht) Object "drin steckt".


    Irgendwo wir wohl sowas hier "passieren":

    JavaScript
    var datum = document.getElementById('textfeld');


    btw: es sollte beim onclick glaube ich document.getElementById(...) heißen:

    JavaScript
    onclick="document.getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+datum;"
  • Probier doch bitte mal das ganze ordentlich auszulagern - evtl. löst das dein Problem schon und es ist übersichtlicher für uns das Problem zu lösen ;)

    JavaScript
    var textfeld = document.getElementById('textfeld');
    textfeld.addEventListener('click', function(event) {
        var datum = getDate();
        console.log(datum);
        textfeld.value = 'Ergänzung vom: ' + datum;
    }


    (ungetestet)

  • So, eine Lösung habe ich gefunden.


    das Problem muß beim Zusammenbauen der var datum entstehen. Wird zwar in der console.log korrekt angezeigt, aber beim onclick Aufruf als Objekt behandelt.
    Wenn ich stattdessen die Einzelkomponenten der datum Variablen einbaue, dann funktioniert es.


    JavaScript
    echo "<textarea onclick="getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+tag+'.'+monat+'.'+jahr;" class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">";


    " innerhalb sind maskiert.


    warum es jedoch mit:

    JavaScript
    var datum = (tag+"."+monat+"."+jahr);


    nicht funktioniert, erschließt sich mir nicht. Habe aber einen Unterschied festgestellt:

    JavaScript
    var datum = (tag+'.'+monat+'.'+jahr); //ergibt einen console.log error (SyntaxError: missing ) in parenthetical
    	var datum = (tag++monat++jahr);)


    JavaScript
    var datum = (tag+"."+monat+"."+jahr);//ergibt keinen error, aber dafür den Objekt Fehler


    @cotton
    ob ich es mit: onclick="document.getElement... oder onclick="getElement... mache ist egal, es funktioniert beides.


    lauras
    ich kann das leider nur im Rahmen meiner hier im gesamten HTML/PHP Seminar erworbenen Kenntnisse umsetzen. Ordentliches auslagern von javascript war leider kein Schwerpunktthema und muß ich mir erst noch aneignen.
    Ich bitte daher, die etwas improvisierte Umsetzung zu entschuldigen.

  • Wie hast Du denn tag, monat und jahr definiert? Bei mir funktioniert es:


    test: http://jsfiddle.net/7h0chpkj/


  • Eigentlich nicht anders als bei Dir.


    JavaScript
    echo '<script>
                      var date = new Date();
                      var tag = date.getDate();
                      var monat = date.getMonth()+1;
                      var jahr = date.getFullYear();
                      var datum = (tag+"."+monat+"."+jahr);
    	     </script>';


    Ich kopier mir mal Deinen jsfiddle code und teste den mal lokal bei mir.
    Möchte mich hier schon einmal für Eure Hilfe bedanken! So kommt man weiter.

  • Die eine Variante mit den einfachen Anführungszeichen hat wohl nicht funktioniert, weil Du via PHP verkettet hast.
    Am Bsp:

    PHP
    echo 'var datum = (tag+'.'+monat+'.'+jahr);'
    // output: var datum = (tag++monat++jahr);


    Warum:
    Du startest die Ausgabe (echo) mit einem ' (einfachen Anführungszeichen) und unterbrichst (den String) nach tag+ wieder.
    PHP interpretiert das so;

    PHP
    echo 'var datum = (tag+'. // und verbinde
        '+monat+'. // und verbinde
        '+jahr);'
    ;


    Da war also einfach nur der Wurm drin. Mit " innerhalb der Strings hätte es funktioniert.


  • Das noch nicht über post versendete <input> Formularfeld verursacht den Fehler. Und zwar durch das name="datum".
    Weshalb sich js dadurch irritieren läßt, wo es doch bei lokalen und globalen Variablen durch Ignoranz glänzt?


    Problem endgültig gelöst! Vielen dank an alle!
    Ralph

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!