Javascript auf einer einzelnen Seite

    Hallo zusammen,

    ich habe mit der Suche leider nichts passendes gefunden.

    Ich möchte einen Javascript-Code auf eine einzelne Seite in meinem WP einbinden. Es ist eine Art Rechner. Der Nutzer gibt einen Wert ein, drückt auf "berechnen" und erhält einen anderen Wert. Der Code funktioniert für sich genommen. Wenn ich das aber in den Code-Editor meines WP eingebe, kommt beim Klick auf "Berechnen" anstelle des berechneten Wertes eine neue Seite: "Seite wurde nicht gefunden."

    Ich habe bislang nur Plugins gefunden, die mir das Einbinden von JS für alle Seiten ermöglichen(?). Ich will den Code aber ausschließlich auf dieser einen Seite.

    Ich stehe nun auf dem Schlauch und weiss nicht weiter. Ich hoffe jemand mag sich meiner erbarmen.

    Vielen Dank.

    Liebe Grüße

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Der Code in der WP-Seite enthält (mind.) einen Syntax Error in dieser Zeile:

    Code
    // Prüfe auf Möglichkeit von erdähnlichem Leben
                if ((masse >= 0.5 && masse <= 1.4) && (alter >= 3.5)) {


    Weiterhin überzählige [FONT=Courier New]<body>[/FONT] bzw. [FONT=Courier New]<html>[/FONT] Tags.

    Ergänzung: Deaktiviere bei einer Problemsuche zunächst alle Cache- und Optimierungs Plugins und auch alle Plugins, die möglicherweise in Scripts eingreifen, derzeit mind. aktiv: Cache Enabler, Real Cookie Banner

    4 Mal editiert, zuletzt von b3317133 (1. März 2024 um 00:21)

    Vielen Dank für deine schnelle Antwort.

    • Den Syntax Error finde ich nicht.
    • Die überflüssigen Tags habe ich entfernt.
    • Deaktivierung der Plugins hat auch nicht geholfen.


    Ich hatte gehofft es wäre ein Anfänger-Fehler für den ich ausgelacht werde, weil es so simpel ist.

    Falsch (WP-Seite):

    Code
    // Prüfe auf Möglichkeit von erdähnlichem Leben
                if ((masse >= 0.5 && masse <= 1.4) && (alter >= 3.5)) {


    Richtig (Stand alone Seite):

    Code
    // Prüfe auf Möglichkeit von erdähnlichem Leben
                if ((masse >= 0.5 && masse <= 1.4) && (alter >= 3.5)) {


    Du kannst den Code im HTML Quelltext im Browser vergleichen, meist Strg-U oder rechte Maustaste > Seitenquelltext anzeigen o.ä.

    Es kann sein, dass der WordPress Editor oder andere Einflüsse aus welchen Gründen auch immer Deinen Script Code zerstören, verwende in dem Fall eines der o.g. Code-Snippet Plugins oder binde den Code als nachgeladene [FONT=Courier New].js[/FONT] Datei ein.

    7 Mal editiert, zuletzt von b3317133 (1. März 2024 um 00:33)

    Im WP hat man ja die Auswahl zwischen dem Visuellen Editor und dem Code-Editor. Letzteren habe ich dafür verwendet. Ich habe den Code aus Visual Studio Code rauskopiert und im WP-Editor eingefügt.

    Zitat von b3317133


    Und bei Code-Snippet Plugins gibt es oft die Möglichkeit, Einbindungsart-/ort auszuwählen.

    Habt ihr Empfehlungen welche(s) Plugin man verwenden könnte?

    Zitat von b3317133


    Und bei Code-Snippet Plugins gibt es oft die Möglichkeit, Einbindungsart-/ort auszuwählen.

    Zitat von threadi

    Falls Du damit die beiden Editor-Modi vom Block Editor meinst, so würde ich dort keinen JavaScript-Code einfügen. Der wird, wie man bei dir sieht, kodiert. Das ist nur für HTML gedacht, das kann nicht für JavaScript funktionieren.

    Ich würde dir raten derartigen Code eher über ein schon angesprochenes https://wordpress.org/plugins/search/Code+Snippet/ Plugin einbinden.

    Habt ihr Empfehlungen welche(s) Plugin man verwenden könnte?

    @threadi Der Code wird interessanterweise nur exakt an dieser einen Stelle codiert, andere [FONT=Courier New]&&[/FONT] Zeichen auch in der gleichen Zeile sind unbeeinflusst. Falls das tatsächlich direkt vom WordPress Editor so beeinflusst wird, dann scheint der Editor Code den entspr. Programmierern inzwischen weit über den Kopf gewachsen zu sein.

    Wenn Du das Script manuell als Datei einbinden willst, entferne die [FONT=Courier New]<script>[/FONT] HTML Tags und die [FONT=Courier New]<!-- xxx -->[/FONT] HTML Kommentare aus der [FONT=Courier New].js[/FONT] Datei.

    Wenn Du ein Snippet Plugin nutzt, ist eine manuelle Einbindung über einen [FONT=Courier New]<script src="...">[/FONT] Tag üblicherweise nicht nötig sondern alles wird vom Plugin erledigt.

    4 Mal editiert, zuletzt von b3317133 (1. März 2024 um 12:22)

    Vielen Dank für eure schnelle Hilfe.

    Leider funktioniert es noch immer nicht. Ich werde das dann wohl verwerfen. Die <script>-Tags lassen sich im Plugin nicht entfernen. Das Plugin erzeugt eine externe .js-Datei, deshalb binde ich diese so ein, einen anderen Weg kenne ich nicht und wir auch nicht vom Plugin angeboten.

    Danke :)

    Das aktuell verwendete Plugin bindet diese Datei bereits selbst komplett inline im HTML Code im [FONT=Courier New]<head>[/FONT] Tag ein, siehe HTML Quelltext im Browser, meist Strg-U oder rechte Maustaste > Seitenquelltext anzeigen o.ä.

    Wie gesagt, wenn Du ein Snippet Plugin wie dieses nutzt, ist eine zusätzliche manuelle Einbindung nicht nötig.

    Im [FONT=Courier New]<head>[/FONT] kann das Script aber (noch) nicht funktionieren, da dort das Element mit dem ID [FONT=Courier New]sternForm[/FONT] noch nicht exisitert. Evtl. kannst Du im Plugin den Footer als Ausgabeort anwählen.

    Ausserdem laufen weiterhin Cache- und Optimierungs und ggf. Scripts verändernde Plugins (siehe oben), so ist es von aussen schwer zu wissen, was wirklich in WordPress hinterlegt ist, da man ggf. nur alte Cache-Daten sieht.

    10 Mal editiert, zuletzt von b3317133 (1. März 2024 um 20:40)

    Ja ich hab grad gesehen, dass das Plugin das in head von jeder Seite packt, das ist ja grad das was ich nicht wollte, sondern das explizit nur für diese eine Seite. Ich versuche es mal, den js-Code in den Footer zu legen. Ich nehme aber an, dass das Problem ganz woanders liegt, da ja nicht einfach nur der Code nicht oder falsch ausgeführt wird, sondern diese "Seite nicht gefunden"-Seite geladen wird!? :(

    Jetzt ist der Code im Footer und die Berechnung funktioniert auf der WP-Seite.

    Auf Seiten ohne das Formular erzeugt es aber einen Script Fehler, da das Element mit ID [FONT=Courier New]sternForm[/FONT] dort nicht exisitiert, was man z.B. so abfangen könnte:

    Code
    if (elem = document.getElementById('sternForm')) {
    elem.addEventListener('submit', function(event) {
        event.preventDefault(); // prevent form submission
        berechneWerte();
    });
}


    Alternativ verwende eines der oben in Antwort #2 verlinkten Code Snippet Plugins, wenn Du Code nur auf einzelnen Seiten einfügen willst, Plugin Beschreibungen lesen...

    5 Mal editiert, zuletzt von b3317133 (1. März 2024 um 21:08)

    Zitat von b3317133

    Jetzt ist der Code im Footer und die Berechnung funktioniert auf der WP-Seite.

    Auf Seiten ohne das Formular erzeugt es aber einen Script Fehler, da das Element mit ID [FONT=Courier New]sternForm[/FONT] dort nicht exisitiert, was man z.B. so abfangen könnte:

    Code
    if (elem = document.getElementById('sternForm')) {
    elem.addEventListener('submit', function(event) {
        event.preventDefault(); // prevent form submission
        berechneWerte();
    });
}

    Dankeschön!

    Zitat von b3317133


    Alternativ verwende eines der oben in Antwort #2 verlinkten Code Snippet Plugins, wenn Du Code nur auf einzelnen Seiten einfügen willst, Plugin Beschreibungen lesen...

    Hab jetzt mehrere ausprobiert, keines ermöglicht mir - zumindest in der Free-Version - das Einbinden in einzelne Seiten.

    Ich danke euch für eure Zeit und Mühen! :)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden