Weiterleitung Funktioniert nicht

ileFix · 15. Januar 2021

Hallo, ich bin neu in der HTML Programmierung und möchte auch nur mal ein bisschen rumprobieren. Ich bin dabei, eine kleine einfache Webseite zu schreiben, welche einfach nur deinen Suchauftrag nimmt und dich auf Google weiterleitet.

Leider funktioniert die Weiterleitung nicht mehr. Nachdem ich es nochmal umgeschrieben hat, damit man auch per Enter absenden kann. Wird zwar die Funktion Suchen() aufgerufen, allerdings funktioniert die Webseiten Weiterleitung nicht mehr.

Hier mein Code:

Code

<!DOCTYPE html>
<title>Durchsuche das Netz</title>
<link rel="shortcut icon" type="image/x-icon" href="Ordner/favicon.ico">
<style>
    div.container {
        background-color: #1C1C1C;
    }
    div.container p {
        font-family: Roboto;
        font-size: 48px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
    }
    div.container r {
        font-family: Roboto;
        font-size: 20px;
        font-weight: normal;
        color: #ffffff;
        text-align: center;
    }
</style>
<head>
    <div class="container">
        <p>Durchsuche die Welt</p>
    </div>
</head>
<body bgcolor=#1C1C1C>
    <div class="container">
        <r>
            <form onsubmit="Suchen();">
                <input type="text" id="suche">
                <input type="submit" value="Submit">
            </form>
            <script>
                function Suchen() {
                    if ((document.getElementById("suche").value) != "") {
                        var URL1 = "https://www.google.com/search?q=" + (document.getElementById("suche").value)
                        location.href = URL1
                    }
                }
            </script>
        </r>
    </div>
</body>
</html>

Alles anzeigen

Danke im Voraus für die Hilfe.

AndreasB · 15. Januar 2021

Hallo ileFix,

das muss so aussehen:

JavaScript

function Suchen() {
    event.preventDefault();
    /* ... */
}

Erklärung:

Du musst das Formular daran hindern, dass es "abgeschickt" wird. Ansonsten lädt die Seite neu.

Das machst du mit der Methode preventDefault auf dem Eventobjekt.

Da du allerdings, die Such-Methode mit einem Eventlistener aus dem DOM Level 1 onsubmit="" implementiert hast, wird das Eventobjekt nicht automatisch übergeben.

Daher musst du das globale Eventobjekt aus dem DOM verwenden: window.event.

Übrigens:

Ich würde immer empfehlen, die Eventlistener aus DOM Level 2 zu verwenden, EventTarget.addEventListener() der hat unter Anderem, den Vorteil, dass das Eventobjekt direkt mit übergeben wird.

prodev · 15. Januar 2021

Hallo!

Zitat

ich bin neu in der HTML Programmierung

1. HTML ist keine Programmiersprache

2. Bitte mache dich bevor du mit solchen Projekten anfängst, mit dem Grundaufbau von HTML 5 vertraut. Dein Code ist komplett von vorne bis hinten mit Fehler voll. Verwendest du ein Tutorial oder woher hast du das?

Ich nehme mir mal die Zeit, und Liste dir die Fehler auf:

Dein <title> sowie <Style> und <link rel="shortcut icon" type="image/x-icon" href="Ordner/favicon.ico"> müssen in den <Head>.

Hier mal das Grundgerüst: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst

bgcolor=#1C1C1C ist vollkommen veraltet, bitte per CSS über background-color machen.

Ich weiß nicht, was du mit <r> machen willst, <r> ist aber auf jeden Fall KEIN gültiges HTML-Element.

Wenn du das verbessert hast, helfe ich dir gerne auch noch bei dem JS, Probier es aber erstmal selbst

ileFix · 15. Januar 2021

Zitat von AndreasB
Hallo ileFix,

das muss so aussehen:
JavaScript
function Suchen() {
    event.preventDefault();
    /* ... */
}
Erklärung:
Du musst das Formular daran hindern, dass es "abgeschickt" wird. Ansonsten lädt die Seite neu.
Das machst du mit der Methode preventDefault auf dem Eventobjekt.

Da du allerdings, die Such-Methode mit einem Eventlistener aus dem DOM Level 1 onsubmit="" implementiert hast, wird das Eventobjekt nicht automatisch übergeben.
Daher musst du das globale Eventobjekt aus dem DOM verwenden: window.event.

Übrigens:
Ich würde immer empfehlen, die Eventlistener aus DOM Level 2 zu verwenden, EventTarget.addEventListener() der hat unter Anderem, den Vorteil, dass das Eventobjekt direkt mit übergeben wird.
Alles anzeigen

Vielen Dank für die Erklärung. Funktioniert alles.

ileFix · 15. Januar 2021

Zitat von prodev

Hallo!
1. HTML ist keine Programmiersprache
2. Bitte mache dich bevor du mit solchen Projekten anfängst, mit dem Grundaufbau von HTML 5 vertraut. Dein Code ist komplett von vorne bis hinten mit Fehler voll. Verwendest du ein Tutorial oder woher hast du das?

Ich nehme mir mal die Zeit, und Liste dir die Fehler auf:

Dein <title> sowie <Style> und <link rel="shortcut icon" type="image/x-icon" href="Ordner/favicon.ico"> müssen in den <Head>.
Hier mal das Grundgerüst: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst

bgcolor=#1C1C1C ist vollkommen veraltet, bitte per CSS über background-color machen.

Ich weiß nicht, was du mit <r> machen willst, <r> ist aber auf jeden Fall KEIN gültiges HTML-Element.

Wenn du das verbessert hast, helfe ich dir gerne auch noch bei dem JS, Probier es aber erstmal selbst

Alles anzeigen

Hallo, danke für deine Rückmeldung. Ist mir auch klar, dass es keine Programmiersprache ist. Mir ist aber auf die schnelle kein anderes Verb eingefallen. Deine Fehler aufgelisteten Fehler habe ich alle berichtigt. das <r> übergibt aus dem <style> die werte.
Ich habe mir das ganze Zeug aus verschiedenen Tutorials/Webseiten zusammen gesammelt. Wir müssen nur schnell etwas für die Schule in HTML schreiben.

prodev · 15. Januar 2021

Wenn du das <r> nur als style benutzt, kannst du doch einfach auch das <form> in CSS stylen

webkriecher · 16. Januar 2021

Das mit dem r Tag hab ich auch noch nie gesehen. War das so vorgegeben, oder habt ihr das so gelernt?

Du könntest es auch einfach weglassen, da du es ja ohnehin in nem div hast, den du im CSS schon verwendest. Dann halt einfach ohne das r.

Weiterleitung Funktioniert nicht

Jetzt mitmachen!

Teilen