[HTML/CSS/JavaScript]

PoiZz3n · 18. September 2018

Guten Abend,

ich habe folgendes Problem:

Ich möchte auf meiner Seite die mittels HTML erzeugt wird drei verschiedene Eingabemasken anzeigen, jedoch immer nur eine gleichzeitig und das ganze soll durch einen simplen Button getriggert werden.

HTML:

<!DOCTYPE HTML>
<html>
    <head>
  
    </head>
  
    <body>
        <h1>E-Learning Fragen bearbeiten</h1>
        <p>Sie können neue Fragen einstellen, bereits vorhandene bearbeiten oder löschen.</p> 
        <form>
            <button onclick="zeigeEingabemaske()"> Neue Frage erstellen </button>
            <button onclick="zeigeEingabemaske()"> Neue Frage erstellen </button>
            <button onclick="zeigeEingabemaske()"> Neue Frage erstellen </button>
        </form>
              
        <div id="neu">
            <form> 
                Fragentext:<br>
                <input type="text" name="fragentext"><br>
                Antwort 1:<br>
                <input type="text" name="a1"> <br>
                Antwort 2:<br>
                <input type="text" name="a2"> <br>
                Antwort 3:<br>
                <input type="text" name="a3"> <br>
      
                <br>     
      
                <label for="korrekteAntwort">Richtige Antwort:</label>
                <input list="antwortListe" id="antwortliste" name="antwortListe" />
      
                <datalist id="antwortListe">
                    <option value="Antwort 1">
                    <option value="Antwort 2">
                    <option value="Antwort 3">
                </datalist>
            
                <button type="button">Absenden</button>
            </form>
        </div>
      
        <!-- weiterer analoger Code -->
      
    <style>

            #neu {
                width:90%;
                background-color: lightblue;
            
          
            }

            #aendern {
                width:90%;
                background-color: lightgreen;
              
              
            }

            #loeschen {
                background-color: black;
                width: 90%;
                color: white;
              
            }
        </style>
      
        <script>
            function zeigeEingabemaske()
            { 
                var x = document.getElementById("neu");
                if (x.style.display === "none")
                {
                    x.style.display = "block";
                }
                else
                {
                    x.style.display = "none";
                }
            }
        </script>     
    </body>
</html>

In diesem Abschnitt versuche ich zunächst das erste div-Element mit der id "neu" per Button ein und auszublenden, wenn das funktioniert wollte ich schauen, wie ich den Rest realisiere. Das Problem ist nun jedoch, dass das Script um die Sichtbarkeit des div-Elements zu steuern grundsätzlich funktioniert, jedoch springt die Sichtbarkeit sofort wieder zurück auf sichtbar und weiß einfach nicht warum.

Ich wäre sehr dankbar wenn mir hier jemand aus der Klemme helfen könnte. Anzumerken ist vielleicht noch, dass das meine erste Bastelei mit HTML/CSS ist und falls noch allgemeine Verbesserungsvorschläge in Bezug auf Stil etc. vorhanden sind, bitte ich ausdrücklich darum diese zu äußern.

Liebe Grüße

EDIT: Habe gerade bemerkt, dass ich vergessen habe einen Titel einzugeben. Kann ich diesen denn noch nachträglich bearbeiten ?

Bagbag · 18. September 2018

Das Problem ist, dass du dabei die Form abschickst und die Seite damit neu lädst.

<form onsubmit="return false;"> zu der Buttons-Form.

Damit passiert das nicht mehr. Musst du natürlich ausbauen, je nach dem was du vor hast oder einfach das Form-Element weg lassen.

Edit: Und hier noch ein passender HTML-"Container", sodass du keine Probleme mit bspw. dem ö bei "Sie können" hast.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 
</body>
</html>

PoiZz3n · 18. September 2018

Habs jetzt hinbekommen. Auf die die Sache mit dem Form wäre ich vermutlich nicht so schnell von allein gekommen... Vielen Dank

Darrel · 18. September 2018

Was Bagbag geschrieben hat ist schon ein Schritt zur Lösung. Der Grund für das Neuladen ist, dass ein Button-Element ohne type ein Formular abschickt.

Ich würde das <form>-Element um die buttons einfach weglassen. Alternativ könnte man die buttons auch so vom Abschicken des Formulars hindern:

<button type="button" onclick="zeigeEingabemaske()"> Neue Frage erstellen </button>

Und es wäre eventuell eleganter, wenn man nicht jedem <button> einzeln einen Event Handler gibt, sondern dem Elternelement einen gibt, der die relevanten Kindelemente händelt (Stichwort: Event Delegation).

Ach ja: In Zeile 29: Das <label for="korrekteAntwort"> stimmt nicht mit der id des inputs überein: <input id="antwortliste"

Suche

[HTML/CSS/JavaScript]

PoiZz3n

Cadet 2nd Year

Bagbag

Commodore

PoiZz3n

Cadet 2nd Year

Darrel

Lt. Junior Grade

Ähnliche Themen