Anfänger hat Probleme bei seinem ersten Code

B

bombi222

Neues Mitglied
Hallo,
ich Code jetzt seit 1 Woche und bin grade dabei mein erstes Quiz zu erstellen.
Dabei habe ich ein Problem und vielleicht hat hier wer Lust mir zu helfen.
Die Var f1-f4 werden nicht initialisiert also ich kann mit diesem Code einfach nichts machen.
Es wird auch leider kein Fehler in der Konsole angezeigt.
Java script code: 
function submitAnswers() {
    var numQuestions = 4; // anzahl der fragen
    var answers = ['a', 'c', 'a', 'b']; // lösung
    var score = 0;

    var name = document.querySelector('input[name="name]').value;

    var f1 = document.getElementById(`input[name="f1"]:checked`).value;
    var f2 = document.querySelector(`input[name="f2"]:checked`).value;
    var f3 = document.querySelector(`input[name="f3"]:checked`).value;
    var f4 = document.querySelector(`input[name="f4"]:checked`).value; // daher wissen wir was angeklickt wurde

    for (i = 1; i <= numQuestions; i++) {
        // <-- erledigt für alle fragen dann muss man den gleichen code nicht für 4 fragen schreiben
        if (eval(`f` + i) == null || eval(`f` + i) == ``) {
            eval('Folgende Antwort fehlt noch' + i);
            return false;
        }
    }

    for (i = 1; i <= numQuestions; i++) {
        // <-- schaut ob die fragen richtig sind wenn ja gibt es einen Punkt
        if (eval('f' + i) == answers[i - 1]) {
            score++;
        }
    }

    var results = document.getElementById(`results`);
    results.innerHTML =
        `<h3>` +
        name +
        `Du hast <span>` +
        score +
        `</span von <span` +
        numQuestions +
        `</span> Punkten erreicht! </h3>`;
    if (score == numQuestions) {
        eval(name + `Du hast alle fragen richtig beantwortet!!`);
    } else if (score >= 1) {
        eval(name + `Du hast` + score + `von` + numQuestions + `Punkte erreicht!`);
    } else {
        eval('Das war wohl nichts, du hast alle fragen falsch beantwortet!');
    }
    return false;
}
HTML Code: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Quiz</title>
        <link rel="stylesheet" type="Text/css" href="style.css" />
    </head>
    <body>
        <script src="java.js"></script>
        <div id="container">
            <header>
                <h1>
                    Quiz viel spaß!!!!
                </h1>
                <p>text</p>
            </header>

            <section>
                <form>
                    Wie ist dein Name:
                    <br />
                    <input type="text" name="name" id="name" />
                    <br />
                </form>
                <div id="results"></div>

                <form name="quizform" onsubmit="return submitAnswers()">
                    <h3>Wofür steht das H1 Tag</h3>
                    <input type="radio" name="f1" value="a" id="f1a" />
                    a. große Überschrift
                    <br />
                    <input type="radio" name="f1" value="b" id="f1b" />
                    b. große Überschrift
                    <br />
                    <input type="radio" name="f1" value="c" id="f1c" />
                    c. große Überschrift
                    <br />
                    <input type="radio" name="f1" value="d" id="f1d" />
                    d. große Überschrift
                    <br />

                    <h3>Wofür steht das H1 Tag</h3>
                    <input type="radio" name="f2" value="a" id="f2a" />
                    a. große Überschrift
                    <br />
                    <input type="radio" name="f2" value="b" id="f2b" />
                    b. große Überschrift
                    <br />
                    <input type="radio" name="f2" value="c" id="f2c" />
                    c. große Überschrift
                    <br />
                    <input type="radio" name="f2" value="d" id="f2d" />
                    d. große Überschrift
                    <br />

                    <h3>Wofür steht das H1 Tag</h3>
                    <input type="radio" name="f3" value="a" id="f3a" />
                    a. große Überschrift
                    <br />
                    <input type="radio" name="f3" value="b" id="f3b" />
                    b. große Überschrift
                    <br />
                    <input type="radio" name="f3" value="c" id="f3c" />
                    c. große Überschrift
                    <br />
                    <input type="radio" name="f3" value="d" id="f3d" />
                    d. große Überschrift
                    <br />

                    <h3>Wofür steht das H1 Tag</h3>
                    <input type="radio" name="f4" value="a" id="f4a" />
                    a. große Überschrift
                    <br />
                    <input type="radio" name="f4" value="b" id="f4b" />
                    b. große Überschrift
                    <br />
                    <input type="radio" name="f4" value="c" id="f4c" />
                    c. große Überschrift
                    <br />
                    <input type="radio" name="f4" value="d" id="f4d" />
                    d. große Überschrift
                    <br />

                    <br />
                    <input type="submit" value="Antwort Abschicken" />
                </form>
            </section>
        </div>
    </body>
</html>
 
Warum denkst du, die Variablen werden nicht initialisiert?

Ein paar Sachen fallen mir im nicht-Java-Code "java.js" auf:
  1. Fehlende Anführungszeichen: var name = document.querySelector('input[name="name]').value; (Zeile5)
  2. Sollte das nicht eigentlich querySelector(...) heißen, statt var f1 = document.getElementById(`input[name="f1"]:checked`).value;? (Zeile8)
  3. eval warum? eval wertet Text zu Code aus. Macht glaube ich nicht das, was du wolltest. Sollte das eher ein alert, console.log oder veränderter Text in einem Hinweisfeld sein?
  4. Du benutzt überall die Template-String-Schreibweise `blabla`, aber nutzt nicht die Stärke dieser Schreibweise.. zum Beispiel kannst du damit Zeile40 auch so schreiben: alert(`${name}, du hast ${score} von ${numQuestions} Punkten erreicht!`);

Sowas kannst du ganz gut im Browser testen. Also zum Beispiel die HTML-Seite einfach in Firefox öffnen und dann F12 drücken in in den Konsole-Reiter wechseln. Da kriegst du dann auch die genauen Fehler ausgespuckt. Versuchs mal mit den Änderungen und dann sag Bescheid.
 
Zurück
Oben Unten