TheBrain04: Form an Discord

0 42

Form an Discord

TheBrain04
  • javascript
  • webdesign
  1. 0
    Rolf B
  2. 0
    Raketenwilli
    1. 0
      Rolf B
  3. 0
    Rolf B
    1. 0
      Rolf B
      1. 0
        TheBrain04
        1. 1
          MudGuard
          1. 0
            Rolf B
      2. 0

        @TheBrain04 @Rolf SICHERHEITSALARM

        Raketenwilli
        1. 0
          TheBrain04
          1. 0
            Rolf B
      3. 0
        Gunnar Bittersmann
        • javascript
        1. 0
          TheBrain04
          1. 0
            Rolf B
            1. 0
              TheBrain04
              1. 0
                Rolf B
                1. 0
                  TheBrain04
                  1. 0
                    Rolf B
                    1. 0
                      Der Martin
                      1. 0
                        TheBrain04
                        1. 0
                          Rolf B
                          1. 0
                            TheBrain04
                            1. 0
                              Rolf B
                              1. 0
                                TheBrain04
                                1. 0
                                  Rolf B
                                  1. 0
                                    TheBrain0
                                    1. 0
                                      Rolf B
                                2. 0
                                  Gunnar Bittersmann
                                  • css
                                  • html
                                  • javascript
                                  1. 0
                                    TheBrain04
                                  2. 0
                                    TheBrain04
  4. -1
    TheBrain04
    1. 0
      Gunnar Bittersmann
      • html
      • javascript
      1. 0
        Rolf B
        1. 0
          Gunnar Bittersmann
          1. 0
            Rolf B
            1. 0
              Der Martin
              • menschelei
              1. 0
                Rolf B
                1. 0
                  Der Martin
                  1. 0
                    Rolf B
                    1. 0
                      Der Martin
        2. 0
          Der Martin
SELF-Forum

Form an Discord

TheBrain04
– Informationen zu den Bewertungsregeln

Hallo, ich habe das Problem das ich eine Nachricht von meiner Website an eine Discord WebHook weiterleiten. Ich habe es soweit hin bekommen das wenn ich auf absenden klicke wird es geschickt aber bei den Textfeldern steht dann nur "[object HTMLTextAreaElement]". Weiß jemand wie ich es hinbekomme das dort dann die eingegebenen Sachen stehen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Form an Discord

    Rolf B (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo TheBrain04,

    vielen Dank, dass Du keinerlei technische Informationen preisgibst. Das macht die Hilfestellung viel interessanter. Schließlich löst jeder gern Rätsel.

    Meine Mutmaßung: Du übergibst in einem JavaScript irgendwo das DOM Objekt selbst und nicht seinen Inhalt. Diesen fünde man im value-Attribut des HTMLTextAreaElement Objekts.

    Rolf
    TheBrain $$2\frac{3}{7}$$

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Form an Discord

    Raketenwilli
    – Informationen zu den Bewertungsregeln

    wenn ich auf absenden klicke wird es geschickt aber bei den Textfeldern steht dann nur "[object HTMLTextAreaElement]".

    https://stackoverflow.com/questions/21506957/object-htmltextareaelement-javascript-response

    „You are getting the textarea element itself. To get its value, add .value“

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Form an Discord

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Raketenwilli,

      To get its value, add .value

      Wunderbare Formulierung! 😂

      Rolf

      --
      sumpsi - posui - obstruxi
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Form an Discord

    Rolf B
    – Informationen zu den Bewertungsregeln

    Diesen Beitrag hat TheBrain04 als eigenen Thread gepostet, ich kopiere ihn hierhin.

    Hallo, ich habe das Problem das ich eine Nachricht von meiner Website an eine Discord WebHook weiterleiten. Ich habe es soweit hin bekommen das wenn ich auf absenden klicke wird es geschickt aber bei den Textfeldern steht dann nur "[object HTMLTextAreaElement]". Weiß jemand wie ich es hinbekomme das dort dann die eingegebenen Sachen stehen?

    Code:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button onclick="sendMessage()" type="reset">Send</button>
    <section>
        <h1>Form</h1>
        <div class="containerfooter">
            <!--action="https://formsubmit.co/sunite.contact@gmail.com" -->
            action="index.html" method="POST"
            <form>
                <!--https://formspree.io/f/xyyokvry-->

                <div class="form-group">
                    <label for="Name">Name</label>
                    <input required type="text" id="Name" name="Name" min="3">
                </div>
                <div class="form-group">
                    <label for="Discord">Discord Name + #____</label>
                    <input placeholder="Example#0001" required type="text" id="Discord" name="Discord" min="3">
                </div>
                <div class="form-group">
                    <label for="Bewierbt-sich-als">What rank do you want to apply for?</label>
                    <input placeholder="Manager" required type="text" id="Bewierbt-sich-als" name="Bewierbt-sich-als" min="3">
                </div>

                <div class="form-group">
                    <label for="Stärken">Tell us your strengths & weaknesses</label>
                    <textarea name="Stärken" id="Stärken" cols="5" rows="3" placeholder="1.
2.
3."></textarea>
                </div>

                <div class="form-group">
                    <label for="Message">Tell us five sentences about you.</label>
                    <br><a>(whithout strengths & weaknesses)</a>
                    <textarea name="Message" id="Message" cols="30" rows="10"></textarea>
                </div>

                <button onclick="sendMessage()" type="reset">Send</button>
            </form>
        </div>
        <div id="status "></div>
    </section>
</body>
<script>
    var Name = document.getElementById('Name')
    var Discord = document.getElementById('Discord')
    var Bewierbtsichals = document.getElementById('Bewierbt-sich-als')
    var Stärken = document.getElementById('Stärken')
    var Message = document.getElementById('Message')
    let Hallo = document.querySelector("#Name").value;

    function sendMessage() {
        const request = new XMLHttpRequest();
        request.open("POST", "https://discord.com/api/webhooks/id.....");

        request.setRequestHeader('Content-type', 'application/json');
        document.getElementById('Name')

        const params = {
            content: "Bewerbung \n" +
                "Name: " + Hallo + "\n" +
                "Discord: " + Discord + "\n" +
                "Bewierbtsichals: " + Bewierbtsichals + "\n" +
                "Stärken: " + Stärken + "\n" +
                "Message: " + Message
        }

        request.send(JSON.stringify(params));
    }
</script>

</html>

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Form an Discord

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Rolf,

      var Message = document.getElementById('Message')

      Ja, wie vermutet. Du verwendest das Element und nicht seinen Wert.

      Weitere Hinweise:

      • setze Semikolons an Ende von JavaScript-Befehlen. Der Interpreter denkt sich zwar gern welche dazu und möchte Dir damit helfen, das kann aber zu merkwürdigen Effekten führen.
      • verwende var, let und const konsistent. Ein paar Variablen mit var und eine mit let - das sieht nach zusammenkopiertem und nicht verstandenen Code aus. Im Normalfall nimmt man let für Variablen und const für Werte, die sich nicht mehr ändern. var ist eine Altlast und sollte nur verwendet werden, wenn man Uralt-Browser unterstützen muss.
      • "bewierbt" schreibt man anders.
       var Name = document.getElementById('Name')
 let Hallo = document.querySelector("#Name").value;

      Beide Zeilen fragen das gleiche Element ab, nur mit unterschiedlichen APIs. Für Hallo machst Du es richtig, aber in Name steht wieder nur das DOM-Objekt des input Elements und nicht sein Wert. Lass die Hallo Zeile weg und verwende beim Aufbau des content jeweils Name.value (analog bei den anderen Feldern).

      • Das document.getElementById('Name') hinter setRequestHeader ist überflüssig, und kann weg

      Rolf

      --
      sumpsi - posui - obstruxi
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Form an Discord

        TheBrain04
        – Informationen zu den Bewertungsregeln

        Ich habe jetzt die var's zu let geändert und wenn ich es jetzt absende kommen nur leere nachrichten

        Quelltext hier<script>
    let Name = document.querySelector('#Name').value
    let Discord = document.querySelector('#Discord').value
    let Bewierbtsichals = document.querySelector('#Bewirbt-sich-als').value
    let Stärken = document.querySelector('#Stärken').value
    let Message = document.querySelector('#Message').value

    function sendMessage() {
        const request = new XMLHttpRequest();
        request.open("POST", "https://discord.com/api/webhooks/....");

        request.setRequestHeader('Content-type', 'application/json');


        const params = {
            content: "Bewerbung \n" +
                "Name: " + Name + "\n" +
                "Discord: " + Discord + "\n" +
                "Bewirbtsichals: " + Bewierbtsichals + "\n" +
                "Stärken: " + Stärken + "\n" +
                "Message: " + Message
        }

        request.send(JSON.stringify(params));
    }
</script>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Form an Discord

          MudGuard Homepage des Autors
          +1 Informationen zu den Bewertungsregeln

          Hi,

          <script>
    let Name = document.querySelector('#Name').value
    let Discord = document.querySelector('#Discord').value
    let Bewierbtsichals = document.querySelector('#Bewirbt-sich-als').value
    let Stärken = document.querySelector('#Stärken').value
    let Message = document.querySelector('#Message').value

          Du liest die Werte direkt nach dem Laden der Seite. Also lange, bevor der User was eingegeben hat.

              function sendMessage() {
        const request = new XMLHttpRequest();

          hier, also vor dem Absenden, sollten die Werte ausgelesen werden.

          cu,
          Andreas a/k/a MudGuard

          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln

          1. Form an Discord

            Rolf B (Versionen)
            – Informationen zu den Bewertungsregeln

            Hallo MudGuard,

            weswegen ich ja auch schrieb:

            verwende beim Aufbau des content jeweils Name.value (analog bei den anderen Feldern).

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. @TheBrain04 @Rolf SICHERHEITSALARM

        Raketenwilli (Versionen)
        – Informationen zu den Bewertungsregeln

        Da sind in der Antwort von TheBrain04 (von 17:44) ein paar Daten drin, die sicher nicht drin sein sollen. Bitte editieren.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. @TheBrain04 @Rolf SICHERHEITSALARM

          TheBrain04
          – Informationen zu den Bewertungsregeln

          sind egal kann die url immer ändern. Komme grade iwie nicht in mein account rein um das zu ändern

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. @TheBrain04 @Rolf SICHERHEITSALARM

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo TheBrain04,

            hab's rausgelöscht.

            Editieren geht nach einer gewissen Zeit nicht mehr, und wenn ein Thread beantwortet wurde.

            Komme grade iwie nicht in mein account rein um das zu ändern

            Welchen Account? Bei Selfhtml hast Du keinen - oder nutzt ihn zumindest nicht.

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      3. Form an Discord

        Gunnar Bittersmann Homepage des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        @@Rolf B

         var Name = document.getElementById('Name')
 let Hallo = document.querySelector("#Name").value;

        Beide Zeilen fragen das gleiche Element ab, nur mit unterschiedlichen APIs. Für Hallo machst Du es richtig

        Nein. Beides ist unsinnig.

        An Formularelemente kommt man bereits über document.forms ran, ohne dass man sich die Elemente nochmals aus dem DOM raussuchen müsste.

        Also document.forms[0].Name.value (wenn das Formular das erste auf der Seite ist).

        Auf der sicheren Seite ist man, wenn die Formulare selbst auch namen haben, bspw. <form name="Kontakt">. Dann document.forms.Kontakt.Name.value oder kürzer document.Kontakt.Name.value.

        Das Umkopieren in Variablen ist hier auch überflüssig. Den Wert kann man an Ort und Stelle verwenden.

        Und die Stringkonkatenation ist auch überflüssig. Da verwendet man sinnvollerweise template literals:

        const params = {
  content: `Bewerbung
    Name: ${document.Kontakt.Name.value}
    Discord: ${document.Kontakt.Discord.value}
    Bewierbtsichals: ${document.Kontakt['Bewierbt-sich-als'].value}
    Stärken: ${document.Kontakt.Stärken.value}
    Message: ${document.Kontakt.Message.value}`
};

        Beachte die [] bei Bewierbt-sich-als. Und ja, das schreibt sich mit nur einem e.

        😷 LLAP

        --
        „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
        — Joachim Gauck über Impfgegner
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Form an Discord

          TheBrain04
          – Informationen zu den Bewertungsregeln

          Funktioniert leider nicht Mir wird alles dann rot angezeigt & es wird nichts mehr versendet

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Form an Discord

            Rolf B (Versionen)
            – Informationen zu den Bewertungsregeln

            Hallo TheBrain04,

            Mir wird alles dann rot angezeigt

            Das kann bei einem Template-Literal (so heißen diese in Backticks eingeschlossenen Dinger) je nach verwendetem Editor durchaus normal sein.

            Wenn dann nichts mehr geht - guck in die Entwicklerwerkzeuge des Browsers (F12), sicherlich findet sich da eine Fehlermeldung in der Konsole.

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Form an Discord

              TheBrain04 (Versionen)
              – Informationen zu den Bewertungsregeln

              Es kommen die fehler meldungen:

              Unexpected token '{'
& 
index.html:47 Uncaught ReferenceError: sendMessage is not defined
    at HTMLButtonElement.onclick (index.html:47:62)

              Ich hab schon vieles rum probiert habe finde nicht herraus wieso

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Form an Discord

                Rolf B
                – Informationen zu den Bewertungsregeln

                Hallo TheBrain04,

                ich auch nicht. Ich sehe deinen Bildschirm nicht.

                Ist deine Seite online?

                Wenn nicht - sie sieht so aus, als könnte sie auch auf codepen.io, jsfiddle.net oder TryIt funktionieren. Wenn sie dort liegt, kannst Du einen Link darauf posten und man kann sie live sehen.

                Rolf

                --
                sumpsi - posui - obstruxi
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Form an Discord

                  TheBrain04 (Versionen)
                  – Informationen zu den Bewertungsregeln

                  Dort geht es auch nicht

                  https://codepen.io/TheBrain04/pen/QWOgKeO

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Form an Discord

                    Rolf B (Versionen)
                    – Informationen zu den Bewertungsregeln

                    Hallo TheBrain04,

                    mach die Konsole auf, da siehst Du die Errors.

                    (1) Du hast ein Kommentarende ohne -anfang drin (hinter setRequestHeader)

                    (2) document.ABC.Name.event - WTF? Wieso liest Du eine .event Eigenschaft - davon war nie die Rede und die gibt's auch nicht.

                    (3) Für die übrigen Eingabefelder müsstest Du das auch noch machen.

                    Für einen codepen müsstest Du übrigens den HTML Rahmen entfernen, im HTML Bereich trägt man nur den Inhalt vom body ein. Ob Du das Script als <script> Element im HTML Bereich unterbringst oder im eigenen JS Bereich, ist Dir überlassen. Den Inhalt deiner CSS Datei kannst Du - musst Du nicht - in den CSS Bereich hineinkopieren.

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Form an Discord

                      Der Martin
                      – Informationen zu den Bewertungsregeln

                      Hallo,

                      (1) Du hast ein Kommentarende ohne -anfang drin (hinter setRequestHeader)

                      das wirft natürlich eine Fehlermeldung, ist aber pragmatisch betrachtet kein Problem.

                      (2) document.ABC.Name.event - WTF? Wieso liest Du eine .event Eigenschaft - davon war nie die Rede und die gibt's auch nicht.

                      Das ist aber ein Problem, und darüber habe ich mich auch schon gewundert.

                      Für einen codepen müsstest Du übrigens den HTML Rahmen entfernen, im HTML Bereich trägt man nur den Inhalt vom body ein.

                      Oh. Woher weiß man das? Insiderwissen?

                      Möge die Übung gelingen
                       Martin

                      --
                      Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. Form an Discord

                        TheBrain04
                        – Informationen zu den Bewertungsregeln

                        Hab es jetzt auf codepen geändert

                        Aber was soll ich an dem document.ABC.Name ändern ?

                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Form an Discord

                          Rolf B
                          – Informationen zu den Bewertungsregeln

                          Hallo TheBrain04,

                          das Experiment mit document.ABC.Name hast Du wieder ausgebaut. Warum? Der Fehler war nur, danach mit .event weiterzumachen, da hätte .value hingehört. Wenn Du mit document.ABC.… arbeitest, brauchst Du die Variablen nicht, die auf die input-/textarea-Elemente verweisen.

                          Wie Du die .value Eigenschaft verwenden musst, wurde beschrieben.

                          Rolf

                          --
                          sumpsi - posui - obstruxi
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. Form an Discord

                            TheBrain04
                            – Informationen zu den Bewertungsregeln

                            Funktioniert leider immernoch nicht 😕

                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln

                            1. Form an Discord

                              Rolf B
                              – Informationen zu den Bewertungsregeln

                              Hallo TheBrain04,

                               const params = {
                content: "Bewerbung \n" +
                    "Name: " + ${Discord.ABC.Name.value} + "\n" +
                    "Discord: " + Discord + "\n" +
                    "Bewirbt sich als: " + Bewierbtsichals + "\n" +
                    "Stärken & Schwächen: " + Stärken + "\n" +
                    "Message: " + Message
            }

                              Da ist aber nun einiges durcheinander gegangen. So hat Dir das keiner vorgeschlagen. ${...} für einen Variablenzugriff ist nur innerhalb eines template string zulässig. Ich habe Dir vorhin unseren Wiki-Artikel zu template strings verlinkt, da kannst Du Dich schlau machen.

                              Entweder verwendest Du einen Template String, wie Gunnar um 18:27 vorschlug, oder Stringverkettung, wie Du es bisher hattest. Deine Entscheidung.

                              In beiden Fällen musst Du die Feldinhalte richtig auslesen.

                              Dein eigener Ansatz war document.getElementById(...) - das liefert das Objekt zum HTML Element. Ein anderer Weg ist das, was Gunnar schrieb: Die forms-Auflistung von document, die man auf unterschiedliche Arten nutzen kann. Das hat historische Gründe.

                              document.forms - Auflistung aller Forms auf der Seite

document.forms[0] - das erste Form auf der Seite
document.forms.ABC - das Form mit name="ABC"
document.ABC - ebenfalls das Form mit name="ABC"

                              Was Du auf diesem Weg bekommst, ist das JavaScript-Objekt zum gewünschten Form. Von da aus kannst Du weiter zu den Form-Elementen (input, textarea, etc). Mit document.ABC.Name bekommst Du das Element mit name="Name" - aber das ist das JavaScript-Objekt für das komplette Element. Du musst Die value-Eigenschaft davon verwenden: document.ABC.Name.value.

                              Du hast Discord.ABC.Name.Value geschrieben - siehst Du den Unterschied? Eine Variable Discord hast Du zwar, aber das ist nicht das Dokument, sondern eine Variable von Dir, die auf das Eingabeelement mit name="Discord" verweist. Darin gibt's keine ABC Eigenschaft.

                              Wenn Du es mit Stringverkettung machst, so wie jetzt im Codepen, dann ohne ${...}. Wenn Du Template Strings verwendest, so wie Gunnar vorschlug, dann mit ${...}

                              Also - du hast verschiedene Optionen, aber du kannst sie nicht wild mixen. Es muss zueinander passen. Was Du dafür brauchst, findest Du hier im Thread. Du musst es nur lesen und anwenden.

                              Rolf

                              --
                              sumpsi - posui - obstruxi
                              Beitrag melden
                              –
                              Informationen zu den Bewertungsregeln

                              1. Form an Discord

                                TheBrain04 (Versionen)
                                – Informationen zu den Bewertungsregeln

                                Hab es jetzt mal geändert und hoffe das es so richtig ist

                                https://codepen.io/TheBrain04/pen/QWOgKeO

                                Beitrag melden
                                –
                                Informationen zu den Bewertungsregeln

                                1. Form an Discord

                                  Rolf B
                                  – Informationen zu den Bewertungsregeln

                                  Hallo The„Brain“04,

                                  nein. Ich gehe jetzt schlafen und hoffe, dass ich vom Blick auf diesen Unsinn keine Alpträume bekomme.

                                  Ein Objektliteral ABC? Was ganz neues, und komplett neben der Spur.

                                  Offenbar weißt Du einiges über JavaScript und nutzt das, um deinen Unsinn besonders bunt blühen zu lassen.

                                  Für mich bist Du ein Troll - mach's gut, vielleicht ist jemand anderes gutmütig genug, um Dir zu helfen. Ich nicht mehr.

                                  Rolf

                                  --
                                  sumpsi - posui - obstruxi
                                  Beitrag melden
                                  –
                                  Informationen zu den Bewertungsregeln

                                  1. Form an Discord

                                    TheBrain0
                                    – Informationen zu den Bewertungsregeln

                                    Falls es dir nicht in den sinn gekommen ist es gibt auch anfänger??

                                    Beitrag melden
                                    –
                                    Informationen zu den Bewertungsregeln

                                    1. Form an Discord

                                      Rolf B
                                      – Informationen zu den Bewertungsregeln

                                      Hallo TheBrain0,

                                      ja. Und von denen können welche lesen und andere nicht. Du kannst es vielleicht, aber tust es nicht. Und zwar derart gezielt nicht, dass es wie Vorsatz aussieht. Gute Nacht.

                                      Rolf

                                      --
                                      sumpsi - posui - obstruxi
                                      Beitrag melden
                                      –
                                      Informationen zu den Bewertungsregeln

                                2. Form an Discord

                                  Gunnar Bittersmann Homepage des Autors
                                  – Informationen zu den Bewertungsregeln

                                  @@TheBrain04

                                  Hab es jetzt mal geändert und hoffe das es so richtig ist

                                  https://codepen.io/TheBrain04/pen/QWOgKeO

                                  Fangen wir mal oben an:

                                      <button onclick="sendMessage()" type="reset">Send</button>

                                  Da sind schon mal zwei Fehler:

                                  • Ein Button, der eine Datenübertragung auslösen soll, ist kein Reset-Button. Also weg mit type="reset"!

                                  • Der click-Eventhandler für den Button ist falsch. Formulare sollten auch auf andere Weise abgeschickt werden können als durch Click auf einen Button: durch Drücken der Enter-Taste. Richtig wäre also, auf das submit-Event des Formulars zu reagieren:

                                    document.forms.ABC.addEventListener('submit', sendMessage);

                                    In der Eventhandlerfunktion die Default-Aktion unterdrücken:

                                    function sendMessage(event) {
  event.preventDefault();
  // ...
}

                                  Und warum zwei von diesen Buttons?

                                  section {
    margin-left: -15%;
}

                                  Die Eingabefelder verschwinden links aus dem Bildschirm; der Anfang ist nicht lesbar:

                                  Screenshot

                                  ABC = {
            Name = document.querySelector('#Name').value,

                                  Was soll das?

                                  Räum mal bitte deinen Code auf, bevor andere draufschauen sollen.

                                  Dazu gehört auch die Verwendung von template strings statt Stringverkettung. @Rolf B sagte zwar sinngemäß: Du kannst auch Stringverkettung verwenden, vergaß aber den Zusatz: nur ist das dann halt Kacke. Ich jedenfalls hab keine Lust nachzuprüfen, ob da alle " und + richtig gesetzt sind. Verwende template strings!

                                  Wie das geht sowie das oben Gesagte hab ich mal anhand eines Beispiels demonstriert.

                                  😷 LLAP

                                  --
                                  „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                                  — Joachim Gauck über Impfgegner
                                  Beitrag melden
                                  –
                                  Informationen zu den Bewertungsregeln

                                  1. Form an Discord

                                    TheBrain04 (Versionen)
                                    – Informationen zu den Bewertungsregeln

                                    Es tut mir echt leid aber ich bin in Javascript ein totaler anfängern.

                                    Ist das so jetzt richtig ?

                                    document.forms.ABC.addEventListener('submit', sendMessage);


function sendMessage(event) {
    event.preventDefault();
    const request = new XMLHttpRequest();
    request.open("POST", "https://discord.com/api/id....");

    request.setRequestHeader('Content-type', 'application/json');

    const params = {

        content: "Bewerbung \n" +
            "Name: " + Name + "\n" +
            "Discord: " + Discord + "\n" +
            "Bewirbt sich als: " + Bewierbtsichals + "\n" +
            "Stärken & Schwächen: " + Stärken + "\n" +
            "Message: " + Message
    }


    request.send(JSON.stringify(params));
}
                                    Beitrag melden
                                    –
                                    Informationen zu den Bewertungsregeln

                                  2. Form an Discord

                                    TheBrain04
                                    – Informationen zu den Bewertungsregeln

                                    Hab den falschen code geschickt sorry

                                    https://codepen.io/TheBrain04/pen/QWOgKeO

                                    Beitrag melden
                                    –
                                    Informationen zu den Bewertungsregeln

  4. Form an Discord

    TheBrain04
    −1 Informationen zu den Bewertungsregeln

    Mein code siehzt jetzt so aus und funktioniert auch so:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
</head>

<body>
    <input id="Name" placeholder="Gebe deinen Namen ein">
    <br>
    <input id="Discord" placeholder="Gebe deinen Discord Namen & # ein">
    <br>
    <input id="Beweribt" placeholder="">
    <br>
    <input id="Stärken" placeholder="">
    <br>
    <input id="Nachricht" placeholder="">
    <br>
    <button onclick="inputfn()" id="btn1">Click me</button>
</body>

</html>Quelltext hier

    JavaScript:

    Quelltext hierfunction inputfn() {

    var Name = document.getElementById("Name").value;
    var Discord = document.getElementById("Discord").value;
    var Beweribt = document.getElementById("Beweribt").value;
    var Stärken = document.getElementById("Stärken").value;
    var Nachricht = document.getElementById("Nachricht").value;
    const request = new XMLHttpRequest();
    request.open("POST", "https://discord.com/api/id....");

    request.setRequestHeader('Content-type', 'application/json');

    const params = {

        content: "Bewerbung \n" +
            "Name: " + Name + "\n" +
            "Discord: " + Discord + "\n" +
            "Bewirbt sich als: " + Beweribt + "\n" +
            "Stärken & Schwächen: " + Stärken + "\n" +
            "Message: " + Nachricht + "\n"
    }


    request.send(JSON.stringify(params));
}
    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. Form an Discord

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@TheBrain04

      Mein code siehzt jetzt so aus

      Schade.

      und funktioniert auch so:

      Nein, tut er nicht.

      <html lang="en">

      Deine Seite ist nicht auf englisch. Da muss lang="de" stehen. Wichtig u.a. für Screenreader und Silbentrennung.

          <script src="test.js"></script>
</head>

      Nicht die beste Stelle, um ein Script einzubinden. Verschiebe das ans Ende des body.

          <input id="Name" placeholder="Gebe deinen Namen ein">

      Ganz falsch. Placeholder sind keine Beschriftung – wirklich nicht.

      Du hattest es die ganze Zeit richtig: mit <label for=…>. Warum machst du jetzt so einen Mist daraus?

      BTW, der Imperativ von eingeben ist gib ein!

          <br>

      Ich höre da ein Geräusch.

      Layout mit CSS: display: block o.a.

          <input id="Discord" placeholder="Gebe deinen Discord Namen & # ein">

      Das mag erlaubt sein, wenn ein Leerzeichen danach folgt. Ich würde aber in HTML & immer als &amp; escapen.

          <input id="Beweribt" placeholder="">

      Du solltest beim Schreiben mehr Sorgfalt walten lassen.

      Und dieses Eingabefeld ist völlig ohne Beschriftung.

          <button onclick="inputfn()" id="btn1">Click me</button>

      Wo ist das form-Element geblieben? Déjà vu: Du hattest es richtig. Warum machst du jetzt so einen Mist daraus? Verwende ein Formular!

      Dass es dann falsch ist, aufs click-Event des Buttons zu lauschen, sagte ich schon.

      function inputfn() {

    var Name = document.getElementById("Name").value;

      Wenn du kein Formular hast, kannst du auch document.forms.… nicht verwenden. Verwende ein Formular! Verwende nicht document.getElementById()!

          const params = {

        content: "Bewerbung \n" +
            "Name: " + Name + "\n" +
            "Discord: " + Discord + "\n" +
            "Bewirbt sich als: " + Beweribt + "\n" +
            "Stärken & Schwächen: " + Stärken + "\n" +
            "Message: " + Nachricht + "\n"
    }

      Warum kein template string?

      Warum ignorierst du alle Hinweise, die man dir gibt? 😫

      😷 LLAP

      --
      „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
      — Joachim Gauck über Impfgegner
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Form an Discord

        Rolf B (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        abgesehen von den Grundsatzfehlern hat er auch wieder das Auslesen von .value vor den Eventhandler gezogen - fail.

        Warum ignorierst du alle Hinweise, die man dir gibt? 😫

        Informationsimprägniert?

        Rolf

        --
        sumpsi - posui - obstruxi

        Grundlage für Zitat #2586.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Form an Discord

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Rolf B

          abgesehen von den Grundsatzfehlern hat er auch wieder das Auslesen von .value vor den Eventhandler gezogen - fail.

          ?? Das passiert doch im Eventhandler‽

          Ich hatte noch überlegt zu erwähnen, dass man das Raussuchen der Elemente aus dem DOM nicht im Eventhandler machen sollte. Aber da man das hier gar nicht machen sollte, hab ich es gelassen.

          Informationsimprägniert?

          🤣

          😷 LLAP

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Form an Discord

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo Gunnar,

            ?? Das passiert doch im Eventhandler‽

            Öhm, ja.
            Rolf, Blindfisch!

            Informationsimprägniert

            Mich deucht, ich habe im Glashaus mit Steinen geworfen. Kein Wunder, dass mir jetzt der Arm wehtut.

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Form an Discord

              Der Martin
              – Informationen zu den Bewertungsregeln

              Hallo,

              Informationsimprägniert

              Mich deucht, ich habe im Glashaus mit Steinen geworfen.

              ja, aber keine Sorge, die Wände sind mit Glaswolle gepolstert.

              Kein Wunder, dass mir jetzt der Arm wehtut.

              Der erholt sich wieder. Und immerhin, die Schlussfolgerung stimmte ja trotzdem.

              Möge die Übung gelingen
               Martin

              --
              Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Form an Discord

                Rolf B (Versionen)
                – Informationen zu den Bewertungsregeln

                Hallo Martin,

                wieso beruhigt es mich eher nicht, in einem Raum/Haus zu sein, wo die Wände gepolstert sind?!

                Hör ich da ein leises Kuckuck und seh Jack Nicholson grinsen?!

                Rolf

                --
                sumpsi - posui - obstruxi
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Form an Discord

                  Der Martin
                  – Informationen zu den Bewertungsregeln

                  Hallo,

                  wieso beruhigt es mich eher nicht, in einem Raum/Haus zu sein, wo die Wände gepolstert sind?!

                  keine Ahnung, so weit hatte ich im Moment gar nicht gedacht.

                  Hör ich da ein leises Kuckuck und seh Jack Nicholson grinsen?!

                  Da kann ich nicht ganz folgen - aber wenn ich Jack Nicholson sehe, bin ich näher am Kotzen als am Grinsen. Ich find den Typen einfach nur widerlich-unsympathisch.

                  Möge die Übung gelingen
                   Martin

                  --
                  Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Form an Discord

                    Rolf B (Versionen)
                    – Informationen zu den Bewertungsregeln

                    Hallo Martin,

                    Da kann ich nicht ganz folgen

                    Einer flog über das Kuckucksnest, mit vielen Oscars und Jack Nicholson in der Hauptrolle.

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Form an Discord

                      Der Martin
                      – Informationen zu den Bewertungsregeln

                      Hi,

                      Da kann ich nicht ganz folgen

                      Einer flog über das Kuckucksnest, mit vielen Oscars und Jack Nicholson in der Hauptrolle.

                      danke für die Nachhilfe.
                      Ja, der Titel sagt mir was, den Film habe ich aber aus genannten Gründen nie gesehen.
                      Dabei würde mir vermutlich das Messer in der Tasche aufklappen.

                      Möge die Übung gelingen
                       Martin

                      --
                      Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

        2. Form an Discord

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hallo Rolf,

          Informationsimprägniert?

          das ist mal'n origineller Ausdruck! 😀

          Möge die Übung gelingen
           Martin

          --
          Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln