Eine function für mehrere Container (clickexpand)?

Hi,

könnte eure Hilfe gebrauchen, wieder mal =).

Ich hab auf meiner Website mehrere Div container untereinander. Die Container selbst sind jeweils in drei Bereiche aufgeteilt (head, main, footer).

Der Kopf des Container sollte sichtbar sein und beim anklicken wird der rest eingeblendet.

Mit Javascript entferne ich, oder füge für die clickexpand Animation die Klassen hinzu.

Ich möcht jetzt ungern die gleiche function für jede Box nochmal schreiben.

Wie kann ich die function so gestalten, dass überprüft wird welche Box gerade angeklickt wird ? Und anschließend die Klassen in dem angeklickten Container, hinzugefügt oder entfernt werden ?

Oder kann ich einfach per javascript die Größe ändern (nach dem überprüfen welcher Container angeklickt wurde) ?

Hoffe ihr könnt mir helfen =)

Mfg

hier mein code

Html

<div id="flex_box">
  <div id="flex_box_header">
    <h1>Überschrift</h1>
  </div>
  <div id="flex_box_main" class="hidden">
    <div id="flex_box_inhalt"></div>
  </div>
  <div id="flex_box_footer"></div>
</div>

CSS

.hidden {
    display: none;
}


.sichtbar {
    display: flex;
    animation: einblenden 1s;
}

@keyframes einblenden {
    from {
        opacity: 0%;
    }


    to {
        opacity: 100%;
    }
}

Javascript

'use strict';

mainBox.addEventListener('click', clickex);

function clickex() {
    const mainBox = document.getElementById("flex_box_main");
    if (mainBox.classList.contains('hidden')) {
        mainBox.classList.remove('hidden');
        mainBox.classList.add('sichtbar');
    } else {
        mainBox.classList.remove('sichtbar');
        mainBox.classList.add('hidden');
    }
};
Computer, Technik, HTML, CSS, JavaScript, container, Technologie
JavaScript Problem?

Hab mir einen Passwort Generator gemacht (Code unten), aber irgendwas stimmt da manchmal nicht und ich komm nicht drauf.

Ist noch nicht fertig oder überhaupt ein Krasser Passwort Generator aber hab den aus Langeweile gemacht und dieser Fehler stört mich.

Kann mir jemand weiterhelfen ?

Hier steht kein Undefined.

Hier steht ein Undefined mitten im erstellten Passwort.

Ist nur kurzer JavaScript Code:


let pwLength = 12;
let randomNumber  = Math.round(Math.random() *3);
let ALPHABET = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',  'S', 'T', 'U', 'V', 'W', 'X','Y', 'Z' ];
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
let Numbers = ["0","1","2","3","4","5","6","7","8","9"];
let SpecialChar = 
            ["!", "*", "#" ,"," ,";" ,"?", "+", "-", "_" ,".", "=", "~", "^", "%", "(", ")" ,"{", "}", "[", "]", "|", ":", "/" ];
let passwort = "";


    for (i = 0; i <= pwLength - 1; i++){
    /* zufällige Zahl zwischen 0-3,
    Bei jedem Schleifendurchgang geht es in ein anderes if statement rein */
    randomNumber  = Math.round(Math.random() *3);


                    // +1 Großbuchstabe
                if (randomNumber == 0){
                passwort += ALPHABET[Math.round(Math.random() *ALPHABET.length)]; }
                  // +1 Kleinbuchstabe
                if (randomNumber == 1){
                passwort += alphabet[Math.round(Math.random() *alphabet.length)];}
                  // +1 Zahl
                if (randomNumber == 2){
                   passwort += Numbers[Math.round(Math.random() *Numbers.length)];}
                    // +1 Sonderzeichen
                if (randomNumber == 3){
                passwort += SpecialChar[Math.round(Math.random() *SpecialChar.length)];}
    }
                if (passwort.includes("undefined")){
                console.log("Undefined Fehler, Passwort lautet " + passwort);}
                else{ console.log("Dein Passwort lautet : " +passwort )}

Glaube mit Switch Case wäre das besser als if, hab ich aber nie benutzt nur in Tutorials mal gesehen

JavaScript Problem?
Computer, HTML, Programmieren, CSS, JavaScript, Fachinformatiker, Informatik, JQuery, MySQL, web.de, Angular
ich weiss einfach nicht was ich falsch gemacht habe.?

wie ihr ja alle wisst, versuche ich grad eine seite zu machen. Und ich hab glaub so alles falsch. hier ist ein bild von früher:

Und hier ein bild von jetzt:

ich weiss nicht, was ich falsch gemacht habe. Mein HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MyDrugs - Home</title>
    <link rel="icon" type="image/x-icon" href="MyDrugsLogo.png">
    <link rel="stylesheet" href="homestyle.css">
</head>
<body>
    <div class="main">
        <div class="navbar">
             <div class="icon">
                <section id="newlineup">
                    <div class="text">
                      <h2>Our explosive new lineup.</h2>
                      <h3>For the best MDMA experience <br>Ever.</h3>   
             </div>
             <div class="menu">
                 <ul>
             </div>
             <div class="headtext">
                <h1>Best quality.</h1>
                <h1>Best delivery.</h1>
                <h1>Best security.</h1>
                <h5>Prices as low as 0.0046 BTC.</h5>
            <div class="img">
                <img src="https://mydrugsto.netlify.app/assets/img/powder_explotion_hero.png" alt="IMG">
              <div>
                  <div>
                  </div>
              </div>
              <div>
                    </div>     
              </div>
              <div class="wrapper">
                <a href="shop.html" class="button1"><span> SHOP NOW → </span></a>
        <div>
             <body>
               <section id="topnav">
                            <div class="nav">
                              <div class="logo">
                                  <img alt src="MyDrugsLogo.png" alt="icon">    
                      </body>
</html>

Und hier mein CSS code:

*{
    margin: 0;
    padding: 0;


}


.main{
    width: 100%;
    background-position: center;
    background-color: rgb(7, 7, 31);
    background-size: contain;
    height: 123vh;
    margin: 0px;
}


.headtext{
    position: absolute;
    padding-bottom: 5px;
    padding-left: 769px;
    opacity: 67%;
    color: orange;
    float: left;
    font-size: 25px;
    font-family: sans-serif;
    font-weight: 200;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0px;
}


.img{
    padding: 220px;
    padding-left: 599px;
    padding-right: 10cm;
    padding-top: 150px;
    position: absolute;
}


.text{
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    color: orange;
}


.button1{
    color: rgb(0, 0, 255);
    cursor: pointer;
    font-size: 19px;
    margin-left: 845px;
    margin-top: 150px;
    position: absolute;
    color: rgb(0, 17, 255);
}


#topnav img {
  width: 100%;
  max-width: 40px;
  height: auto;
  align-items: center;
}


.Maintext{
    color: orange;
    padding-top: 995px;
    font-size: 20.5px;
    padding-left: 335px;
    font-weight: lighter;
}


.h5{
    color: orange;
    font-size: 15px;
    font-weight: 100;
}

weiss iregendwer was falsch ist?

ich weiss einfach nicht was ich falsch gemacht habe.?
HTML, CSS
Wie erstelle ich ein dynamisches Kontaktformular?

Hallo, also ich habe bereits ein Kontaktformular erstellt das auch soweit gut funktioniert hierzu mein bisheriger Code:

    <?php
    if(isset($_POST["submit"])){
      mail("email@mail.com", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
      ?>
      <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
      <?php
    }
    ?>


    <form action="contact.php" method="post" class="service-contact-form">
      <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
      <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
      <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
      <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
      <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
      <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
    </form>

Das ist jetzt das normale Kontaktformular, allerdings würde ich gerne unterschiedliche Kontaktformulare mit einem <select> Element auswählen können.

    <div class="service-contact-form-select">
      <select>
        <option value="0">Support Anfrage</option>
        <option value="1">Bestellung</option>
      </select>
    </div>

Denn ich brauche bei der Supportanfrage wesentlich weniger Informationen wie bei dem Bestellformular.

Also was soll passieren?

Wenn ich bei <select> value="0" habe soll das Formular wie oben beschrieben aussehen.

Wenn ich aber bei <select> value="1" habe soll das Kontaktformular um weitere Elemente erweitert werden deren Informationen dann auch via php an meine e-mail übermittelt werden.

Kann mir hier jemand weiterhelfen?

Computer, Internet, HTML, Programmieren, CSS, PHP, Webdesign, Webentwicklung, Webdesign und Entwicklung

Meistgelesene Fragen zum Thema CSS