'Variable send from HTML form is undefined in Javascript

When i the variables i set in HTML can´t be found in the function in Javascript. The console.log only states "undefined". I think the Problem is, that "req.body.answerx" is not refering to the right depth if my HTML code but i cant find what what i would have to add there.

HTML:

<html>
<head>
    <title>Umfrage</title>
    <!-- styling fürs Formular -->
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="umfrageform" action="/auswertungUmfrage">
        <!-- Frage 1 -->
        <div class="question active">
            <h1>Bist Du eher ein Hunde oder ein Katzen Mensch?</h1>
            <P>
                <img src = "\images\pexels-photo-8570243.jpeg"alt ="Katze/Hund" width="600px" height="400px"> 
            </P>
            
                Hund: <input type="radio" name="answer1" value="0" ><br>
                Katze: <input type="radio" name="answer1" value="1" ><br><br>
                <button type="submit">Weiter</button><br><br>
        </div>

        <!-- Frage 2 -->
        <div class="question" >
            <h1>Bist Du eher ein Sommer oder ein Winter Mensch?</h1>
            <P>
                <img src = "\images\pexels-photo-5408684.webp"alt ="Jahreszeit" width="600px" height="400px"> 
            </P>
            
                Sommer: <input type="radio" name="answer2" value="0" ><br>
                Winter: <input type="radio" name="answer2" value="1" ><br><br>
                <button type="submit">Weiter</button><br><br>
        </div>

        </form>

    <a href="/main">Zurück zur Startseite</a>

    <!-- script Tag führt Javascript aus -->
   <script>
    //    Wählt alle Fragen aus
       let questions = document.querySelectorAll(".question");

    //    setzt Eventlistener auf Button innerhalb der Frage und prüft ob es noch eine Frage gibt
    // wenn ja wird die aktuelle Frage ausgeblendet und blendet die nächste Frage ein
    // wenn nicht wird mit dem Klick auf den Button das Formular abgeschickt
       for (let index = 0; index < questions.length; index++) {
           const    element = questions[index],
                    button = element.querySelector("button");

            button.addEventListener("click", (e)=>{
                if(index < questions.length-1){
                    // Wenn wir noch eine weitere Frage haben, wird mit preventdefault verhindert, dass das Formular abgeschickt wird
                    e.preventDefault();
                    // aktuelle Frage wird ausgeblendet
                    element.classList.remove("active");
                    // nächste Frage wird eingeblendet
                    questions[index+1].classList.add("active");
                    
                }  
            });  
       }
   </script> 
</body>

Javascript:

app.get("/auswertungUmfrage", function(req, res){
const answer1 = req.body.answer1;
const answer2 = req.body.answer2;
console.log(answer1);
javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions