• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Funktion wird nicht ausgeführt

E

eddcapone

Neues Mitglied
Schönen Karfreitag zusammen :)
Ich beginne gerade html und JavaScript zu lernen, und hoffe Ihr könnt mir helfen.

Ich habe eine ganz einfache Funktion geschrieben, diese wird jedoch nicht ausgeführt.
Mein Ziel ist es, das ich über zwei Input Boxen, einen Namen und eine Nachricht an eine Funktion zu übergeben, die Funktion soll lediglich dafür sorgen, dass der Name und die Nachricht ganz unten an die Website geschrieben werden, wo sich ein tag mit der id "nachrichten" befindet.

Leider weiss ich nicht wie ich dies umsetzen kann und hoffe das ihr mir etwas unter die Arme greifen könnt :(
Hier ist meine html Seite:

HTML: 
<html>
    <head>

        <script type="text/javascript">
            chat = function (name, message)
            {
                document.write("<p>"+name+": "+message+"</p>");
            }
        </script>
        <link rel="stylesheet" href="style.css"/>
        <h1 style="text-align:center">eddcapone</h1>

    </head>

    <body>
        <input type="text" placeholder="Name" name="name">
        <input type="text" placeholder="Nachricht" name="message">
        <button type="submit" onclick="chat(name,message)"> Senden </button>
        <p id="nachrichten"> Nachrichten </p>

    </body>
</html>

Leider weiss ich außerdem nicht wie ich es erreichen kann, das der Eintrag genau unter dem p tag mit der id "nachrichten" erstellt wird, ich dachte da an "document.getElementsById("nachrichten").data = "<p>"+name+": "+message+"</p>";" ??? Ich hoffe mir kann jemand helfen dieses Ziel zu erreichen, denn dies würde mein Verständnis deutlich verbessern.

Vielen Dank im voraus! :)
Gruß eddcapone
 
Hallo,

da sind ein zwei fehler drin.
erstens html grundstrucktur fehlt, h1 im head bereich, kein doctyp und keine codierung ob iso oder utf8 das ist bei js wichtig.

Wenn das stimmt dürfte das noch nicht gehen da bei deim document.write nicht sagst wo er das schreiben soll, glaube ich da ich nur mit jquery mach da reines js mir zu kompliziert ist.

Cheffchen
 
Ich gebe dir einen Tipp:

Wenn du JavaScript lernen willst, fang mit jQuery an. Das ist einfacher zu verstehen, und du kannst jenen Teil von JS überspringen, heute ohnehin nicht mehr verwendet wird.

Bezüglich jQuery wären die Funktionen nach denen du suchst on() und click() für das Event und append(), appendTo(), insert() und insertAfter() für die Ausgabe im HTML.
 
Hi, danke euch für den Tipp mit JQuery, ich hatte ohnehin vor mir das in den nächsten Tagen beizubringen, dennoch wäre ich jetzt auch sehr an der Lösung zu meinem Problem in Java Script interessiert.

Das h1 ist meiner Meinung nach kein Fehler, schließlich wird die Überschrift angezeigt. Wie kann ich dem Script sagen das es utf8 oder iso verwendet werden soll, und was sollte ich bevorzugen?
Doctype habe ich bisher immer weggelassen, weil es auch ohne bestens funktioniert. Wo fehlt denn die html Grundstruktur ? Ich habe doch meine html tags ?!

Ich hoffe jemand kann mir helfen.
Gruß eddcapone
 
eddcapone schrieb:
Das h1 ist meiner Meinung nach kein Fehler, schließlich wird die Überschrift angezeigt.
Zum Vergrößern anklicken....
Es ist definitiv ein Fehler! Dieses Element hat im <head></head>-Bereich absolut nichts zu suchen, das gehört in den <body></body>-Bereich!

eddcapone schrieb:
Wie kann ich dem Script sagen das es utf8 oder iso verwendet werden soll, und was sollte ich bevorzugen?
Zum Vergrößern anklicken....

Bei externen Dateien (*.js):
Hier muss die Datei auch als UTF-8 abgespeichert werden (In gängigen Editoren/IDE's kann das eingestellt werden). Die Einbindung ins HTML-Dokument schaut dann so aus:
HTML: 
<script src="script.js" charset="UTF-8"></script>

Bei Inline-Script schaut der <script>-Tag so aus:
HTML: 
<script charset="UTF-8"> ... </script>

Weitere Informationen hierzu kannst du hier nachlesen.

eddcapone schrieb:
Doctype habe ich bisher immer weggelassen, weil es auch ohne bestens funktioniert.
Zum Vergrößern anklicken....
Nur weil etwas funktioniert, bedeutet das noch lange nicht, dass es auch richtig ist!
Wenn du keinen Dokumententyp angibst, wird die Seite von gängigen Browsers im sog. Quirks-Modus ausgeführt.
Dieser soll die Abwärtskompatibilität zu Websites sicherstellen, die veralteten oder ungültigen HTML- oder CSS-Code verwenden. Dabei werden u. a. Darstellungsfehler älterer Browserversionen simuliert, damit das Layout dieser Webseiten nicht zerstört wird.
Zum Vergrößern anklicken....
Quelle: Wikipedia

eddcapone schrieb:
Wo fehlt denn die html Grundstruktur ? Ich habe doch meine html tags ?!
Zum Vergrößern anklicken....
1. Es fehlt die Doctype-Deklaration!
2. Ich sehe in deinem HEAD-Bereich keinen <title></title>-Tag!
3. Du positionierst ein <h1>-Element in einem Bereich, wo es nichts zu suchen hat!
 
Danke für deine Hinweise und Hilfestellung CPCoder, ich habe meine Datei umgeschrieben, leider funktioniert es noch immer nicht, hier miene aktuelle Datei, vielleicht kann ja der ein oder andere mal einen Blick drüber werfen, das würde mich freuen:

HTML: 
<!DOCTYPE html>
<html>
    <head>

        <script type="text/javascript" charset="UTF-8">
            chat = function (name, message)
            {
                document.write("<p>"+name+": "+message+"</p>");
            }
        </script>
        <link rel="stylesheet" href="style.css"/>
      
        <title>test</title>
      

    </head>

    <body>
  
        <h1 style="text-align:center">eddcapone</h1>
      
        <input type="text" placeholder="Name" name="name">
        <input type="text" placeholder="Nachricht" name="message">
        <button type="submit" onclick="chat(name,message)"> Senden </button>
        <p id="nachrichten"> Nachrichten </p>

    </body>
</html>

Vielen Dank im voraus!
Gruß eddcapone
 
Ich bin normalerweise kein Freund von Fertiglösungen, aber da Ostern ist, habe ich mal meine Spendierhosen angezogen.

Working Code:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
        <title>test</title>
        <script charset="UTF-8">
            chat = function() {
                var name = document.getElementById("name").value;
                var message = document.getElementById("message").value;
                var p = document.createElement("p");
                var text = name + ": " + message;
                var child = document.createTextNode(text);
                p.appendChild(child);
                document.getElementById("nachrichten").appendChild(p);
                document.getElementById("name").value = "";
                document.getElementById("message").value = "";
            }
        </script>
    </head>
    <body>
        <h1 style="text-align:center">eddcapone</h1>
  
        <input type="text" placeholder="Name" name="name" id="name">
        <input type="text" placeholder="Nachricht" name="message" id="message">
        <button type="submit" onclick="chat()"> Senden </button>
        <div id="nachrichten">
            <p>Nachrichten </p>
        </div>
    </body>
</html>

Informationen zu den verwendeten Funktionen kannst du hier nachlesen:
SELFHTML: JavaScript/DOM Objektreferenz
 
Vielen vielen Dank CPCoder!! :) Ich weiss das zu schätzen, damit wird nun einiges klarer!!

Ich habe nurnoch eine kurze Frage, und zwar, ist es möglich es so zu coden, das die Nachricht dauerhaft in der html Datei gespeichert bleibt?
Denn ursprünglich wollte ich die Seite in meinem LAN über Apache2 hosten damit die Benutzer einen Kommentar hinterlassen können.

Nochmal danke!
Gruß eddcapone
 
Dazu müsstest du die Nachrichten entweder in einer TXT-Datei, oder in einer Datenbank speichern, beides ist aber mit deinen fehlenden Kenntnissen von dir nicht zu bewerkstelligen!

Damit du deine Kenntnisse entsprechend erweitern kannst, arbeite dich durch Tutorials in PHP (und ggf. MySQL) ein.

Eine sehr gute Anlaufstelle dafür ist:
Peter Kropff: Tutorials PHP/MySQL
 
Hi, danke für deine Antwort,
da liegst du falsch, ich habe bereits Kenntnisse in PHP und MySQL. Auf Codecademy habe ich bereits den kompletten PHP Kurs zu 100 % abgeschlossen und MySQL lerne ich momentan in der Ausbildung. Leider wurde bei Codecademy nicht gelehrt wie man Dateien öffnet/schließt/beschreibt/reinlädt etc., aber google wird mir sicherlich helfen, danke für den schubs in die richtige Richtung.

PS: Ich habe eben mal testweise h1 wieder in den Head Bereich platziert und die title Tags entfernt, das Script funktioniert dennoch, ergo ist es eben nicht wie vorher von euch behauptet ein Fehler gewesen, höchstens ein Schönheitsfehler.

Gruß eddcapone
 
Verweis: W3C Head Elements
Ergo: Ein <h>-Element hat im Head nichts zu suchen!
Ergo: Fehler im Dokument-Aufbau!

/* Edit: */
In Bezug auf PHP/MySQL:
OK, dass du in diesen Bereichen entsprechende Kenntnisse hast, war Anhand der fehlenden JS-Kenntnisse nicht ganz klar ;)
 
Zuletzt bearbeitet:
Ich konnte durch ein paar Stunden Recherche und experimentieren endlich mein Ziel erreichen, ich habe nur noch ein Problem, vielleicht ist die Lösung ganz einfach? Ich weiss es nicht, vielleicht könnt ihr mir weiterhelfen. Und zwar funktioniert mein Code soweit, jedoch bekomme ich von meinem Webbrowser (Firefox) folgende Meldung, wenn ich auf den Refresh Button (oder F5) drücke um die Seite zu aktualisieren:

"Um diese Seite anzuzeigen, müssen die von Firefox gesendeten Daten erneut gesendet werden, wodurch alle zuvor durchgeführten Aktionen wiederholt werden (wie eine Suche oder eine Bestellungsaufgabe)."
Zum Vergrößern anklicken....

Das stimmt, die Daten werden daraufhin wirklich neu gesendet, denn wenn ich die Seite aktualisiere, wird der letzte Eintrag erneut in meine Datei geschrieben.

Hier mein aktueller Code:
Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Chat Test</title>
    </head>
    <body>
        <form method="post">
            Name:
            <input type="text" name="username" placeholder="Name">
            <input type="text" name="nachricht" placeholder="Nachricht">

            <input type="submit" onclick="<?php echo $_SERVER['PHP_SELF'];?>">
        </form>

        <?php

            //Datei beschreiben
            $filename = "file.txt";
            $datei = fopen($filename, "a")or exit("<br><p>Fehler beim Oeffnen der Datei! #1</p><br>");

            $name = $_REQUEST['username'];
            $message = $_REQUEST['nachricht'];
      
            if(is_writable($filename))
            {
                if ($name != "" and $message !="")
                {
                    $Eintrag = $name.": ".$message."\n";
                } else {
                    echo "Bitte schreiben Sie zuerst etwas in die Felder!";
                }
          
                echo "<br> Schreibe einen Eintrag <br>";
                echo $Eintrag;

                fwrite($datei,$Eintrag);
                fclose($datei);
            }
            else if (!is_writable($filename))
            {
                echo "<br><p>Sie haben keine Schreibrechte!</p><br>";
            }

            //Lesen der Datei
            echo "<br><br>Datei wird gelesen...<br>";

            $datei = fopen("welcome.txt", "r")or exit("<br><p>Fehler beim Oeffnen der Datei! #2</p><br>");
      
            while(!feof($datei))
            {
                echo fgets($datei). "<br>";
            }

            fclose($datei);
            echo "<br>Lesen beendet...<br>"
        ?>

    </body>
</html>


Ergo: Ein <h>-Element hat im Head nichts zu suchen!
Ergo: Fehler im Dokument-Aufbau!
Zum Vergrößern anklicken....

Da könnten wir noch ewig weiterdiskutieren :D ich sehe das so: wenn es funktioniert, dann ist es kein Fehler, und das tut es ja :p die Überschrift wird immernoch angezeigt, ergo: funktioniert es ^^ ich werde mich aber an euren html Kodex halten und immer brav die h tags in den body schmeissen ;)

"OK, dass du in diesen Bereichen entsprechende Kenntnisse hast, war Anhand der fehlenden JS-Kenntnisse nicht ganz klar"
Zum Vergrößern anklicken....
In meiner Ausbildung zum technischen Assistenten für Informatik lernen wir nur C++, AVR-Assembler, VB-Script und MySql, JS habe ich mir bei Codecademy selbst beigebracht bin jedoch noch nicht mit dem kompletten Kurs fertig geworden und das DOM habe ich nicht so richtig verstanden, danke dir für deine Hilfe das DOM besser zu verstehen. :)

Gruß eddcapone
 
Zuletzt bearbeitet:
eddcapone schrieb:
jedoch bekomme ich von meinem Webbrowser (Firefox) folgende Meldung, wenn ich auf den Refresh Button (oder F5) drücke um die Seite zu aktualisieren:
Zum Vergrößern anklicken....

Die Meldung besagt, dass der Browser zum Neuladen nochmal Daten per POST an den Server schicken muss. Diese Meldung wird durch den Browser erzeugt (gibt es in anderen Browsern mit anderem, aber inhaltlich gleichbedeutendem Text ebenso) und kann von dir als Webseitenbetreiber nicht direkt unterdrückt werden.

Eine Alternative wäre, wenn Du das Formular verarbeiten und nach der Verarbeitung per header() an eine andere Adresse weiterleiten lässt. Dadurch lädt der Browser eine andere URL und per Neuladen kann das Formular nicht nochmal abgeschickt werden.

ich werde mich aber an euren html Kodex halten
Zum Vergrößern anklicken....

Das ist nicht "unser html Kodex" sondern die allgemein anerkannten und gültigen Regeln, vorgegeben durch das W3C für alle HTML-Dokumente an die sich alle Browser und Maschinen, die HTML-Code in irgendeiner Art und Weise verarbeiten, halten und zu halten haben. Wenn Du dich nicht daran hältst riskierst Du neben einer fehlerhaften Darstellung in irgendeinem, von dir vermutlich nicht getesteten Browser (den aber Besucher deines Webs nutzen), sowie eine schlechtere Bewertung durch Suchmaschinen. Letzteres insbesondere da diese die Inhalte anhand ihrer HTML-Auszeichnungen semantisch beurteilen. Ist die Überschrift (insbesondere die <h1>) im <head>-Element, führt das mit großer Wahrscheinlichkeit zu einer fehlerhaften Auswertung der Inhalte deiner Webseite, was dann auch eine schlechtere Auffindbarkeit zu Folge hat.

Gerade wenn Du dich mit C++ und anderen Programmiersprachen auseinandersetzt sollte dir ja bewusst sein, dass die vorhandenen Daten in einem lesbaren Format vorliegen. Der Aufwand für fehlerhaften HTML-Code tolerante Programmierungen zu erstellen ist erheblich hoch - wenn Du mal versuchst ein fehlerhaftes XML-Dokument über C++ einzulesen dürfte dir das bewusst werden ;)
 
Eine Alternative wäre, wenn Du das Formular verarbeiten und nach der Verarbeitung per header() an eine andere Adresse weiterleiten lässt. Dadurch lädt der Browser eine andere URL und per Neuladen kann das Formular nicht nochmal abgeschickt werden.
Zum Vergrößern anklicken....

Heisst das also konkret das ich den Teil des Scripts extern auslagern muss, der die Daten in die Datei schreibt ?

Ich habe es jetzt so gemacht, dass das php Script in einer eigenen Datei ist, leider löst das auch nicht mein Problem, da ich somit ständig auf die php Seite weitergeleitet werde :/ Gibt es eine Möglichkeit, das ich auf der selben Seite bleibe, aber das php Script dennoch ausgeführt wird?

HTML: 
<!DOCTYPE html>
<html>
    <head>
            <title>Chat Test</title>
    </head>

    <body>
        <form method="post" action="filewrite.php">
            Name:
            <input type="text" name="username" placeholder="Name">
            <input type="text" name="nachricht" placeholder="Nachricht">

            <input type="submit">
        </form>

        <iframe src="filewrite.php" width="668em" height="500em"></iframe>

    </body>
</html>

Die einzige Möglichkeit die mir einfällt, wäre es mich wieder vom php Script aus auf meine Hauptseite weiterzuleiten.

Gruß eddacpone
 
Zuletzt bearbeitet:
Nein, ich möchte einfach nur das ein Eintrag in eine Textdatei erstellt wird und dieser ausgelesen werden kann, das reicht mir fürs erste vollkommen, da es mir nur ums Verständnis geht. Außerdem sollte es auch funktionieren wenn kein Internet vorhanden ist, trotzdem danke, die Seite auf die du verlinkt hast sieht lehrreich aus ;)
Gruß eddcapone
 
Zuletzt bearbeitet:
Ah Sorry, den hatte ich wohl überlesen.

In diesem Fall probier es mal mit AJAX, damit kannst du Request (Daten) an dein PHP-Script schicken, ohne das die Seite neu geladen wird. Hier empfehle ich jedoch gleich von Anfang an den Einsatz von JQuery, da JQuery hier einiges an Arbeit abnimmt!
 
Ok danke dir ! Dann werde ich wohl oder übel JQuery lernen müssen, was ich ohnehin vor hatte. Auf Codecademy gibt es zum Glück einen Kurs.

Ich werde mich dann in den nächsten Tagen mal wieder melden und berichten, danke für euren Einsatz mir zu helfen!!
Gruß eddcapone
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben