onclick innerHTML mit Variable funktioniert nicht...

Ralph_68 · 24. September 2014

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?

The Scout · 24. September 2014

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

Ralph_68 · 24. September 2014

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.

lauras · 24. September 2014

Lass dir mal mit Firebug datum ausgeben nachdem die Seite geladen wurde.

JavaScript

console.log(datum);

kommt da was raus?

Ralph_68 · 24. September 2014

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.

cottton · 24. September 2014

Zitat von Ralph_68

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;"

lauras · 24. September 2014

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)

Ralph_68 · 24. September 2014

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.

cottton · 24. September 2014

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

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

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>




    <script type="text/javascript">
        var d = new Date();
        var monat = d.getMonth()+1; // Returns the month (0-11)
        var tag = d.getDate();
        var jahr = d.getFullYear();




        var datum = (tag+'.'+monat+'.'+jahr);




        var datum2 = (tag+"."+monat+"."+jahr);




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




    <br>







    <div id="textfeld2">textfeld2: </div>
    <textarea
        onclick="getElementById('textfeld2').innerHTML+= 'Ergänzung2 vom: '+datum2;"
        class="eingabefeld" id="textfeld2" cols="60" rows="20" name="notiz"></textarea>
</body>
</html>

Alles anzeigen

Ralph_68 · 24. September 2014

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.

cottton · 24. September 2014

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.

Ralph_68 · 25. September 2014

JavaScript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>




    <script type="text/javascript">
        var d = new Date();
        var monat = d.getMonth()+1; // Returns the month (0-11)
        var tag = d.getDate();
        var jahr = d.getFullYear();




        var datum = (tag+'.'+monat+'.'+jahr);




        var datum2 = (tag+"."+monat+"."+jahr);




    </script>
</head>
<body>

        <form action="#" method="post">
            <input type="text" name="datum" value="heutiges Datum"/><br />
            <textarea
                onclick="getElementById('textfeld').innerHTML+= 'Ergänzung vom: '+datum;"
                class="eingabefeld" id="textfeld" cols="60" rows="20" name="notiz">
            </textarea>
        <br>

            <textarea
                onclick="getElementById('textfeld2').innerHTML+= 'Ergänzung2 vom: '+datum2;"
                class="eingabefeld" id="textfeld2" cols="60" rows="20" name="notiz">
            </textarea>
        </form>
</body>
</html>

Alles anzeigen

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

onclick innerHTML mit Variable funktioniert nicht...

Jetzt mitmachen!

Teilen